テンプレート関数を作成する方法 (HTML)

[アーティクル]
03/04/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ListView 用の項目を生成するテンプレート関数の作成方法を説明します。

理解しておく必要があること

テクノロジ

必要条件

WinJS コントロールを使う、JavaScript で開発された基本的な Windows ストアアプリの作成経験が必要です。WinJS のコントロールを使う手順については、「クイックスタート: WinJS コントロールとスタイルの追加」をご覧ください。

手順

ステップ 1: テンプレート関数の概要

マークアップ内で項目テンプレートを定義する代わりに、それぞれの一覧項目をレンダリングする関数を作成することができます。レンダリング関数で使うパラメーターを次に示します。

object renderItem(itemPromise, recycledElement)

itemPromise: レンダリングする項目のデータの IItemPromise です。同期データソースの場合、IItemPromise は通常 complete ですが、非同期データソースの場合は後になって完了します。
recycledElement : 新しいコンテンツを表示するために再利用できる以前の項目の DOM です。このパラメーターは省略可能です。

要素のリサイクルを使う場合は、以下の点に注意する必要があります。
- リサイクルされた要素をプレースホルダーとして使う前に、前の項目の情報を消去してください。リサイクルを使う場合、前の項目には前回使われたときのデータと状態が含まれている可能性があります。リサイクルされた要素を再利用する前に、その状態を消去するか、非表示にしてください。
  
  たとえば、テンプレートに写真が含まれており、img 要素を再利用するときに、新しい URL がまだ提供されていないとします。この場合、前のデータの写真が含まれている可能性があるため、不透明度を 0 に設定して img を非表示にします。新しい写真の URL が提供されたら、img 要素を更新して、不透明度を 1 に戻します。
- 項目の HTML に、項目のデータに基づく条件付き状態が設定されている場合は、リサイクルする際にリセットしてください。
- 要素をリサイクルする場合は、DOM の構造の変更を最小限にしてください。recycledElement が再利用に適切でない場合は、それを無視して新しい要素を作成します。recycledElement に対してはガベージコレクションが実行されます。
警告 ListView では recycledElement の構造体を変更できるため、アクセスを試みる前に子要素が存在することを必ずテストしてください。

レンダリング関数は次のいずれかを返す必要があります。

項目の DOM ツリーのルート要素
次のプロパティを含むオブジェクト
- element: 項目の DOM ツリーのルート要素、または完了時に項目のルート要素を返すプロミスオブジェクトです。
- renderComplete: 項目が完全にレンダリングされた際に完了する Promise です。

ステップ 2: 簡単なレンダリング関数の作成

この例では、templateFunctionListView という名前の ListView を取得し、その itemTemplate プロパティに項目テンプレート関数を設定します。この関数は、各データ項目の title、text、picture を表示します。

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function () {
                var lView = document.getElementById("templateFunctionListView").winControl;
                lView.itemTemplate = itemTemplateFunction;

            }));

        }
    };

   function itemTemplateFunction(itemPromise) {

       return itemPromise.then(function (item) {
           var div = document.createElement("div");

           var img = document.createElement("img");
           img.src = item.data.picture;
           img.alt = item.data.title;
           div.appendChild(img);

           var childDiv = document.createElement("div");

           var title = document.createElement("h4");
           title.innerText = item.data.title;
           childDiv.appendChild(title);

           var desc = document.createElement("h6");
           desc.innerText = item.data.text;
           childDiv.appendChild(desc);

           div.appendChild(childDiv);
           
           return div;
       });
    };

注釈

その他の例については、ListView 項目テンプレートのサンプルに関するページをご覧ください。

次の方法で共有