ListView: splice()

ListView からコンテンツを取り外し、新しいコンテンツを挿入します。

構文

listView.splice(startIndex, deleteCount, insertCount) => ViewLogic[]

引数

  • startIndex : number

    ListView に取り付けられたコンテンツの削除や挿入を行う位置を示す整数です。また要素の削除は要素の挿入より先に行われます。startIndex が負の値を持つ場合、代わりに末尾のコンテンツを 1 番目として末尾から -startIndex 番目の位置から削除や挿入が行われます（ただし、削除および挿入の順序は逆向きにならず、リストの末尾へ向かって行われます）。startIndex が NaN であるか -startIndex がコンテンツの個数（リストの長さ）を超える場合、代わりに 0 が使用されます。-startIndex がリストの長さを超える場合、代わりに末尾の要素の添え字に 1 を足したものが使用されます（これは数値としてはリストの長さに一致します）。startIndex が整数でない場合、前述の変換を行った上で、小数点以下を切り捨てた整数を代わりに使用します。

  • deleteCount: number

    ListView から削除するコンテンツの個数を示す整数です。コンテンツの削除は startIndex から startIndex + deleteCount - 1 までの deleteCount 個に対し行われます。特に、deleteCount が 0 ならコンテンツの削除は行われません。deleteCount が NaN または負なら代わりに 0 が使用されます。startIndex 以降のコンテンツの個数を超える値を deleteCount が持つ場合、代わりに startIndex 以降のコンテンツの個数に等しい値が使用されます。deleteCount が整数でない場合、前述の変換を行った上で、小数点以下を切り捨てた整数を代わりに使用します。

  • insertCount: number

    ListView に挿入する新しいコンテンツの個数を示す整数です。コンテンツの挿入は startIndex の位置で行われ、startIndex から startIndex + insertCount - 1 までが新たに生成されたコンテンツとなります。特に、insertCount が 0 ならコンテンツの挿入は行われません。insertCount が NaN または負なら代わりに 0 が使用されます。insertCount が整数でない場合、前述の変換を行った上で、小数点以下を切り捨てた整数を代わりに使用します。

返値: ViewLogic[]

対象の ListView から取り外されたコンテンツの配列です。コンテンツの削除を行わなかった場合、空の配列を返します。

例

const listVl = new class ListVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `<alier-list-view id="list"></alier-list-view>`,
            id: "list",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

const archetype = new class ListItemVl extends ViewLogic {
    constructor() {
        super();
        this.loadContainer({
            text: `
                <head><style>
                .row {
                    --border-width: 2px;
                    display: grid;
                    grid-template: auto 1fr / repeat(2, 1fr);
                }
                .row:nth-child(3n) {
                    background-color: lightblue;
                }
                .row:nth-child(5n) {
                    border: var(--border-width) solid orange;
                }
                :not(.row:nth-child(5n)) {
                    padding: var(--border-width);
                }
                </style></head>
                <body>
                <div id="hello" class="row">
                <span
                    id="word"
                    data-ui-component
                    data-primary="textContent"
                ></span>
                <span
                    id="length"
                    data-ui-component
                    data-primary="textContent"
                ></span>
                </div>
                </body>
                `,
            id: "hello",
        });
        this.relateElements(this.collectElements(this.container));
    }
};

const words = [
    "Antelope", "Bear"   , "Cat"       , "Dog"    , "Elephant",
    "Falcon"  , "Giraffe", "Hawk"      , "Iguana" , "Jaguar"  ,
    "Kangaroo", "Lion"   , "Moose"     , "Narwhal", "Ostrich" ,
    "Penguin" , "Quail"  , "Rhinoceros", "Sloth"  , "Tiger"   ,
    "Urchin"  , "Vulture", "Wolf"      , "Xerus"  , "Yak"     ,
    "Zebra"
];

const prevVl = Alier.View.attach(listVl);

//  listVl.container に archetype のコンストラクタ（ListItemVl）をテンプレートとして設定する
listVl.container.attach(archetype);

//  listVl に words の要素数だけ要素を追加する
listVl.container.splice(0, 0, words.length);

//  words の値を listVl の各要素に設定する
for (const item of listVl.container) {
    const word = words.splice(0, 1)[0];
    item.reflectValues({ word, length: word.length });
}

//  添え字 5 から 16 個の要素を削除する（前方 5 個と後方 5 の単語だけが残る）
listVl.container.splice(5, 16);

解説

ListView からコンテンツを取り外し、新しいコンテンツを挿入します。挿入されるコンテンツは template プロパティに設定されている ViewLogic 派生クラスのコンストラクタから生成されます。

template プロパティが設定されていない場合、この関数は対象の ListView の状態を変更せずに空の配列を返します。