ListView

モジュールパス: /alier_sys/ListView.js

概要

ListView はリスト型のコンテンツを提供するためのビューです。

ListView クラスのインスタンスは HTML カスタム要素 <alier-list-view> として生成されます。

<alier-list-view></alier-list-view>

基底の AlierView は ViewLogic と一対一の対応を持つ HTML 要素ですが、ListView は同じ ViewLogic 派生クラスから生成されたインスタンスを複数を持つことができます。

AlierView と同様に、ListView のコンテンツは自身が持つシャドウツリーの中に挿入されます。シャドウツリーのルートを模式的に <shadow-root> と表すことにすると、ListView の DOM ツリーは以下のようになります。

<alier-list-view>
    <shadow-root>
        <div><style>/* <shadow-root> 内で有効な CSS ルール */</style></div>
        <div>
            <!-- 以下の <div> 要素は同じ ViewLogic 派生クラスから生成される -->
            <div><!-- ListView に登録されているコンテンツ 1 --></div>
            <div><!-- ListView に登録されているコンテンツ 2 --></div>
            <div><!-- ListView に登録されているコンテンツ 3 --></div>
            <!-- ... -->
        </div>
    </shadow-root>
</alier-list-view>

ListView は ObservableArray とデータ同期させることができます。

メソッド

attach()

• ListView に追加する ViewLogic のコンストラクタを template プロパティに登録します。

detach()

• ListView に取り付けられている ViewLogic を取り外します。

sort()

• ListView に取り付けられたコンテンツを並べ替えます。

sortByKey()

• ListView に取り付けられたコンテンツを特定のキーについて並べ替えます。

splice()

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

slice()

• 対象の ListView から指定の範囲のコンテンツを与える反復可能イテレータ（IterableIterator）を取得します。

get()

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

values()

• 対象の ListView からコンテンツの反復可能イテレータを取得します。

keys()

対象の ListView からコンテンツの添え字の反復可能イテレータを取得します。

entries()

対象の ListView からコンテンツとその添え字の組の反復可能イテレータを取得します。

syncComponents()

対象の ListView と同期している ObservableArray との同期処理を行います。

onDataBinding()

• データ同期の対象となった際に呼び出されるコールバック関数です。

プロパティ

length

このプロパティは読み取り専用です。

ListView に取り付けられている ViewLogic の個数です。

型

number

詳細

ListView に取り付けられた（attach()）ViewLogic インスタンスの個数です。

template

このプロパティは読み取り専用です。

ListView に取り付けられている ViewLogic インスタンスのテンプレートとなるコンストラクタです。

型

new () => ViewLogic

詳細

ListView に取り付けられた（attach()）ViewLogic のテンプレートです。splice() 関数の呼び出しの際、挿入する要素数が 1 以上だった場合、このテンプレートから新たに ViewLogic が生成されます。

この値は attach() 関数や detach() 関数によって変更されます。