<div data-win-control=data-win-control属性に「WinJS.Binding.Template」を指定し、この<div>タグ内に実際の表示内容を用意していきます。このように記述されたタグは、リストビューの表示用テンプレートとして認識されるため、画面には表示されなくなります。
"WinJS.Binding.Template">
……表示内容を用意……
</div>>
<○○ data-win-bind:" 属性名 : 項目名">データの値を表示させるタグは、このような形で記述します。こうして「どの属性に、どの値を割り付けるのか」を指定するのです。例えば、<P data-win-bind:"value:mail">とすれば、データのmailという項目の値をvalue属性に設定してタグを書き出す、というわけです。
<div data-win-control="WinJS.UI.ListView"itemDataSourceというオプションで、用意したデータを指定し、itemTemplateというオプションで使用するテンプレートを指定します。これで、指定のテンプレートを使い、指定の連想配列からデータを取得してリストを作成することができます。
data-win-options="{itemDataSource:データ, itemTemplate: テンプレート }">
※リストが表示されない場合
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: テンプレート }">
<< 前へ | 次へ >> |