リストビューとフリップビュー (2/5)

データ作成関係はスクリプトで行うので、まずはHTMLのタグで用意できる「テンプレート」について整理しておきましょう。これは以下のような形で用意します。

<div data-win-control=
        "WinJS.Binding.Template">
    ……表示内容を用意……
</div>>

data-win-control属性に「WinJS.Binding.Template」を指定し、この<div>タグ内に実際の表示内容を用意していきます。このように記述されたタグは、リストビューの表示用テンプレートとして認識されるため、画面には表示されなくなります。

このタグ内に用意する表示内容ですが、これはHTMLのタグを使って作成します。ただし、単にタグを書くだけではなく、ちょっとだけ仕掛けをしておく必要があります。

<○○ data-win-bind:" 属性名 : 項目名">

データの値を表示させるタグは、このような形で記述します。こうして「どの属性に、どの値を割り付けるのか」を指定するのです。例えば、<P data-win-bind:"value:mail">とすれば、データのmailという項目の値をvalue属性に設定してタグを書き出す、というわけです。

では、下のリスト欄に簡単なテンプレート例をあげておきましょう。ここでは「title」「content」という２つの値を表示するテンプレートを考えてみました。data-win-control="WinJS.Binding.Template"の<div>タグ内に<div>タグを用意して表示の大きさや背景色などを指定し、その更に中に値を表示するための<div>タグを用意してあります。

このタグは、<div data-win-control="WinJS.Binding.Template">タグの前あたりに書いておけばよいでしょう。どこに書いてあっても、実際には非表示となりますので全体のレイアウトには影響を与えません。



リストビューに表示するデータは、連想配列の配列として用意します（ただし、そのままではなく、Listというオブジェクトを用意します）。テンプレートのdata-win-bind指定してある各タグに表示できるように、連想配列のキー名を同じ名前に合わせておく必要があります。

データを用意したら、これをリストビューにバインドすることになります。が、これが実はけっこうややこしいのです。データの連想配列をリストビューにバインドするには、リストビューのタグにdata-win-optionsを使って指定してやります。こんな具合です。

<div data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource:データ, itemTemplate: テンプレート }">

itemDataSourceというオプションで、用意したデータを指定し、itemTemplateというオプションで使用するテンプレートを指定します。これで、指定のテンプレートを使い、指定の連想配列からデータを取得してリストを作成することができます。

何がややこしいのか？と思った人。問題は、「連想配列をどうやってリストビューに指定するか」なのです。既に説明したように、Windows Storeアプリのスクリプトは匿名関数にまとめられており、使用する変数なども全てこの中に用意するのがマナーです。ということは、グローバル変数ではないということです。グローバル変数でないのですから、変数名をitemDataSourceオプションに指定しても「そんな変数は見つからないよ」とエラーになります。

ではどうするか。こうした場合に用意されているのが「名前空間（ネームスペース）」です。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※テンプレートのタグ構成

<div id="listTemp1" data-win-control="WinJS.Binding.Template">
    <div style="width: 250px; height:250px; background-color:blue">
        <div data-win-bind="textContent: title" style="font-size:18pt;"></div>
        <div data-win-bind="textContent: content" style="font-size:14pt;"></div>
    </div>
</div>


※テンプレートを割り当てるタグ

<div data-win-control="WinJS.UI.ListView"
    data-win-options="{itemDataSource:データ, itemTemplate: テンプレート }">