no versions found for ApplicationFrameworkReferences / CustomElement/listview_get / en

ListView: get()

対象の ListView から指定の位置のコンテンツを取得します。

構文

listView.get(index) => ViewLogic?

引数

  • index: number

    取得するコンテンツの位置を示す整数です。index が負の場合、コンテンツの末尾を 1 番目として末尾から -index 番目のコンテンツを取得とします。index が NaN である場合、代わりに 0 が使用されます。

返値: ViewLogic?

index の位置にあるコンテンツです。index がコンテンツの添え字の範囲を超える場合、null と等価な値が返ります。

例

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 });
}

//  先頭から 13 個目のコンテンツに設定された単語が Narwhal であることを検証する
console.log(listVl.container.get(13).curateValues().word === "Narwhal");
//  ==> true

//  末尾から 2 個目のコンテンツに設定された単語が Yak であることを検証する
console.log(listVl.container.get(-2).curateValues().word === "Yak");
//  ==> true

//  先頭から 27 個目の要素がないことを検証する
console.log(listVl.container.get(26) === undefined);
//  ==> true

//  末尾から 27 個目の要素がないことを検証する
console.log(listVl.container.get(-27) === undefined);
//  ==> true

解説

対象の ListView から指定の位置のコンテンツを取得します。