Extendable List

Web環境では、例えば1000以上ある項目のアドレス帳を表示するような、大量のデータのリストを表示することは困難です。これは、HTMLでリスト全体を表示するには時間がかかるうえに、DOM操作が複雑であるためです。

拡張可能リストウィジェットはパフォーマンス向上のために無制限のデータ要素のリストを表示するのに使えます。次のデータ要素を読み込むためにリストの一番下にあるボタンをクリックすると、リストが拡張されます。jQueryのドキュメントに記載されているjQuery.templateプラグインに拡張可能リストは基づいています。

アプリケーションに拡張可能リストウィジェットを追加するには、次のコードを使用します。

<script id="tmp-3-1-1" type="text/x-jquery-tmpl">
   <li class="ui-li-3-1-1"><span class="ui-li-text-main">${NAME}</span></li>
</script>

<script id="tmp_load_more" type="text/x-jquery-tmpl">
   <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">
      <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>
   </li>
</script>

<ul id="extendable_list_main" data-role="extendablelist"
 data-extenditems="50" data-template="tmp-3-1-1">
</ul>

拡張リストのオプションを次の表で説明します。

オプション	入力タイプ	説明
data-role	文字列	拡張可能なリストビューを作成します。値は`extendablelist`に設定する必要があります。 id属性が定義された`ul`要素のみ、このオプションをサポートしています。また、データベースからのデータの読み込みを確実にするためには、`ul`要素に`elLoadSuccess`クラス属性を定義する必要があります。
data-template	文字列	`jQuery.template`の要素IDを指定します。 `jQuery.template`は定義されている必要があります。そのテンプレートのスタイルは、スケーラビリティをサポートするために`rem`ユニットを使用することができます。リスト下部に配置した次のデータ要素をロードするボタンを使用するためには、リストのテンプレートにボタンも必要になります。その属性IDは`tmp_load_more`でなければなりません。
data-extenditems	整数	一度に拡張するデータ要素の数を設定します。

拡張可能なリストを作成するcreate()メソッドを使用することができます。 createメソッドは3つの引数を受け取ります。

function itemData(index)

与えられたindexのJSONオブジェクトを返すために使用します。インデックス値は0とnumItemData-1の間でなければなりません。
number numItemData | function numItemData()

項目の数またはアイテムの数を返すメソッドです。
function cacheItemData(minIndex, maxIndex)

JSONデータを準備するために使用します。このメソッドはitemData(index)メソッドの前にコールされます。minIndexとmaxIndexの間のインデックス値のためにこのメソッドはコールされます。