データの表示レイアウトを決めよう
旅行カタログに表示するデータの用意ができたので、アプリに表示するための画面レイアウトを設定します。
情報の表示テンプレートを決める
旅行カタログアプリ画面の中央左側のスペースに、旅行先情報（写真／タイトル／インフォメーション）を表示します。その際、各データをどのようにレイアウトして表示するかを定義する必要があります。そこで、default.htmlを開き、main-left要素の中を次のように修正します。
<div id="main-left">
<!-- 1. 旅行先情報の表示方法(テンプレート)を指定する -->
<div id="travelTemplate" data-win-control="WinJS.Binding.Template">
<!-- 画像(image)を表示 -->
<img data-win-bind="src:image" height="550">
<!--タイトル(title)を表示 -->
<div data-win-bind="textContent:title"></div>
<!--インフォメーション(info)を表示 -->
<div data-win-bind="textContent:info"></div>
</div>
</div>
ここでは、テンプレートに「travelTemplate」というid属性を設定し、画像を高さ550ピクセルで表示し、その下にタイトルとインフォメーションを配置しています。
画面のデザインとデータを紐づけるには、data-win-bind属性を指定します。data-win-bind属性は、HTMLタグのプロパティとデータのプロパティをコロンで区切って定義します。例えば、<div data-win-bind="textContent:info">は、HTMLのdiv要素のtextContentプロパティの値を、JavaScriptで定義したデータのinfoの値に紐づけるという意味になります。
情報を表示する場所を決める
次に、情報を表示したい場所にListViewコントロールを配置します。default.htmlを開き、main-left要素の中を次のように修正します。ここでは、id属性が「travel-list」であるListViewコントロールを配置します。
<div id="main-left">
<!-- 1. 旅行先情報の表示方法(テンプレート)を指定する -->
～中略～
<!-- 2. 旅行先情報の表示 -->
<div id="travel-list" data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate:select('#travelTemplate') }">
</div>
</div>
ListViewコントロールを配置するには、data-win-control属性を「WinJS.UI.ListView」に設定します。また、配置したListViewコントロールのデータの表示方法は、data-win-options属性を設定します。先ほど定義した「travelTemplate」をもとにして体裁を決めるには、data-win-options属性を、data-win-options="{ itemTemplate:select('#travelTemplate') }"のように指定します。これは、ListViewコントロールで表示するデータ項目の表示テンプレートに「travelTemplate」を選ぶという意味になります。
このtravel-list要素に、スタイルを設定するためdefault.cssに以下を追加します。
div#travel-list {
width: 100%;
height:100%;
float: left;
}
データを表示しよう
旅行カタログに表示するデータの用意ができたので、アプリに表示するためのプログラミングを行います。
それでは、作成したtraveldata.jsにデータバインディングを行うためのプログラムを追加します。
(function () {
"use strict";
// 旅行データの登録（ヨーロッパ）
～ 中略～
// 旅行データの登録（ビーチリゾート）
～ 中略～
// 1.データバインディングの設定
var dataEU = new WinJS.Binding.List(dataArrayEU);
var dataBeach = new WinJS.Binding.List(dataArrayBeach);
// 2.画面からデータを参照できるようにする設定
WinJS.Namespace.define("TravelData", { EU: dataEU, Beach: dataBeach });
})();
追加したプログラムの説明は次のとおりです。
1.データバインディング
作成したヨーロッパとビーチリゾートのデータを、それぞれ変数dataEUと変数dataBeachにデータバインドします。このときに使うWinJS.Binding.Listオブジェクトは、JavaScriptのデータをHTML画面で利用するためのデータのありかを示すもので、データソースと呼ばれています。
2.データ参照の設定
作成したデータは、他のプログラムから一切アクセスすることができないように保護されています。そのため、HTML画面からデータを参照するために、「名前空間」を作成します。
アプリケーションの中で変数やメソッドで名前が同じものを使ってしまった場合、プログラムは正しく動作しません。これを名前の衝突と言います。
そこでこの名前の衝突を避けるために「名前空間」を設定します。
例えば、花子さんという名前の人が2人いたとすると、それぞれを区別するために「野村」さん「三井」さんという苗字をつけて名前を呼ぶと、2人の名前をが競合することはありません。
名前空間を設定するには、WinJS.Namespace.defineメソッドを使います。defineメソッドは、WinJS.Namespace.define( 名前空間 , { 名前 : 値 , 名前 : 値 });のように指定します。
サンプルの例では、「TravelData」という名前空間に、EUとBeachという2つの名前を定義し、それぞれの値に1.でデータバインディングを行ったdataEUとdataBeachの値を設定しています。
