1

ナビゲーション テンプレートから始めて、ListView WinControl をページ (home.html ではない) に配置しようとしました。HTML の挿入は正しく機能し、Javascript も正しく実行されます。

ただし、data-win-options を使用してリストビューをバインドしようとすると、JS の Ready ハンドラーで定義した名前空間がまだ存在しないという問題が発生するため、アプリは例外をスローします。

準備完了イベントの前に名前空間を定義すると、例外はありませんが、準備完了ハンドラーで実行する「パブリック」変数への更新は ListView に反映されません。正しくデータが入力されました。

今のところListViewを機能させる唯一の方法は、直接更新することです

document.getElementById('myListView').winControl.itemDataSource

それは本当に私が行きたい方法ではありません。バインディングを HTML にしたいと思います。

要約すると、ナビゲーション テンプレートで ListView をバインドする正しい方法は何ですか? それとも、この問題を抱えているのは私だけですか?

4

1 に答える 1

2

ここにはいくつかの可動部分があります。

まず、データ ソースの変数は「観測可能」ではないため、変数が変更されたことを誰にも通知しません。これは、JavaScript が本質的にできることではありません。

data-win-options2 つ目は、値を取得するだけで、それを監視しようとしないバケット経由で渡したということです。

これを解決するには、いくつかの方法があります。

a）見つけた方法を活用しますが、変数を監視可能にし、変更ハンドラーを追加して変更時に値を転送します。これはあなたが望むように宣言的ではありませんが、悪くはありません。

var yourVariable = WinJS.Binding.as({ dataSource: null });
yourVariable.bind("dataSource", function(oldVal, newVal) {
    document.getElementById("yourListView").winControl.itemDataSource = newVal;
});

yourVariable.dataSource = getMyDataYo();

b) HTML で宣言型バインディングを設定し、データ コンテキストで WinJS.Binding.processAll() を呼び出します。

HTML:

<div data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemTemplate:... }"
     data-win-bind="winControl.itemDataSource: dataSourceProperty"
</div>

JS: Ready ハンドラで:

var dataContext = WinJS.Binding.as({ dataSourceProperty: dataSourceInstance });
WinJS.Binding.processAll(element, dataContext);

dataContext インスタンスを保存するdataSourcePropertyと、将来、新しいデータソースで を設定したときに、リストビューがリロードされ、再レイアウトされます。

于 2012-09-22T15:53:29.273 に答える