back
リストビューとフリップビュー (3/5)
■名前空間を割り当てる
名前空間とは、文字通り「変数などを保管する場所」です。変数などを、変数名だけでなく「○○の△△にある☓☓」といった具合に指定できるようにする――それが名前空間の考え方です。例えばWinJS.UI.ListViewというのも「WinJSというところのUIという場所にあるListView」というように、指定の場所にオブジェクトが保管されていることがわかるでしょう。
Windows Storeアプリでは、ローカル変数に名前空間を割り当てることでグローバルにアクセスできるようになります。この名前空間の割り当ては以下のように行います。
では、実際にデータを用意してリストビューにバインドしてみましょう。下のリスト欄にサンプルを掲載しておきました。リストビューのタグにdata-win-optionsを追加し、それからスクリプト側でデータとなる連想配列を用意しバインドします。
リストビューでは、itemDataSource:mydata.itemList.dataSourceというようにオプションが指定されていましたから、mydata.itemListにListオブジェクトが保管されていれば、そのdataSourceプロパティからデータが得られるようになります。itemDataSourceでは、「ListオブジェクトのdataSourceプロパティ」を指定しないといけないので注意してください。連想配列を直接、itemDataSourceに指定してもうまく動きません。必ずListオブジェクトを用意し、そのdataSourceを指定します。
Windows Storeアプリでは、ローカル変数に名前空間を割り当てることでグローバルにアクセスできるようになります。この名前空間の割り当ては以下のように行います。
WinJS.Namespace.define( 場所の指定 , { 名前 : 値 });これで指定の場所に指定の名前で変数を割り当てることができます。後は、場所と名前を正確に指定して値を利用するだけです。では、実際にデータを用意してリストビューにバインドしてみましょう。下のリスト欄にサンプルを掲載しておきました。リストビューのタグにdata-win-optionsを追加し、それからスクリプト側でデータとなる連想配列を用意しバインドします。
data-win-options="{itemDataSource:mydata.itemList.dataSource,
itemTemplate:select('#listTemp1')}"itemDataSourceには、mydata.itemList.dataSourceと値が指定されています。これは、mydataという場所にあるitemListというオブジェクトのdataSourceプロパティを示しています。これを念頭に置いて、スクリプト側のデータを準備している部分を見てみましょう。var dataList = new WinJS.Binding.List(dataArray);変数dataArrayに連想配列を代入し、「WinJS.Binding.List」というオブジェクトを作成しています。これが、ListViewで使用するリストとなるオブジェクトです。ListViewでは、表示するデータをこのListオブジェクトとして用意し設定します。このListオブジェクトのdataSourceプロパティにデータとなる連想配列が格納されています。
var members = { itemList: dataList };
WinJS.Namespace.define("mydata", members);作成したWinJS.Binding.ListオブジェクトをitemListという名前で連想配列にまとめ、それをWinJS.Namespaceの「define」というメソッドで名前空間に割り当てています。これで、mydataにitemListという名前でListオブジェクトが割り当てられました。リストビューでは、itemDataSource:mydata.itemList.dataSourceというようにオプションが指定されていましたから、mydata.itemListにListオブジェクトが保管されていれば、そのdataSourceプロパティからデータが得られるようになります。itemDataSourceでは、「ListオブジェクトのdataSourceプロパティ」を指定しないといけないので注意してください。連想配列を直接、itemDataSourceに指定してもうまく動きません。必ずListオブジェクトを用意し、そのdataSourceを指定します。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※リストビューのタグの修正（テンプレートは別途用意）
<div id="listview1" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource:mydata.itemList.dataSource, itemTemplate:select('#listTemp1')}">
</div>
※スクリプトの修正
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
// ListView用のデータ
var dataArray = [
{ title: "Windows", content: "WindowsはマイクロソフトのOSです。" },
{ title: "Mac OS X", content: "Mac OS Xはアップルが提供するOSです。Macにのみ搭載されています。" },
{ title: "Linux", content: "LinuxはオープンソースのOSです。標準搭載されるPCはまだ少数です。" },
{ title: "Android", content: "AndroidはGoogleが開発するOSです。スマートフォンやタブレット他、多数の危機に用いられています。" },
{ title: "iOS", content: "iOSはアップルのOSです。iPhone/iPadに搭載されています。" },
{ title: "Chrome OS", content: "Chrome OSはGoogleによるOSです。Chromebookに搭載される他、オープンソースで配布されてもいます。" }
];
var dataList = new WinJS.Binding.List(dataArray);
var members = { itemList: dataList };
WinJS.Namespace.define("mydata", members);
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.
ApplicationExecutionState.terminated) {} else {}
args.setPromise(WinJS.UI.processAll());
}
}
app.oncheckpoint = function (args) {};
app.start();
})();
| << 前へ | 次へ >> |