grouped の本当に厄介な動作に直面していますWinJS.Binding.List
。
SemanticZoom を作成しようとすると、(マークアップで) ズームアウトされたビュー アイテムとズームインされたビュー ヘッダーに次のデータから同じデータが入力されますlist.groups.dataSource
。
<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: true }">
<div id="zoomedInListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Data.myCategories.dataSource,
itemTemplate: select('#zoomedInItemTemplate'),
groupDataSource: Data.myCategories.groups.dataSource,
groupHeaderTemplate: select('#zoomedInHeaderTemplate')
}"
></div>
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Data.myCategories.groups.dataSource,
itemTemplate: select('#zoomedOutItemTemplate')
}"
></div>
</div>
このコードは、私のデータに応じて機能するか機能しません:
リモート データから生成された 3 レベルのカテゴリ ツリーである実際のデータを使用すると (WinJS.xhr を呼び出します)、ズームアウトされた ListView は itemDataSource をグループにバインドできません。したがって、私の SemanticZoom は適切に処理されていますが、ズームアウトされたビューは空です。
より正確には、ズームアウトしたビューで:
このコードは失敗します:
data-win-options="{ itemDataSource: Data.myCategories.groups.dataSource, itemTemplate: select('#zoomedOutItemTemplate') }"
このコードは機能しますが、グループが必要な間は詳細なカテゴリが表示されます:
data-win-options="{ itemDataSource: Data.myCategories.dataSource, itemTemplate: select('#zoomedOutItemTemplate') }"
このコードは機能し、以前に呼び出したときにグループが整形式であることを証明して
createGrouped
いますが、ズームアウトするメイングループのみを表示するにはズームアウトビューが必要なので、これを行うのは意味がありません:data-win-options="{ itemDataSource: Data.myCategories.dataSource, itemTemplate: select('#zoomedOutItemTemplate'), groupDataSource: Data.myCategories.groups.dataSource }"
サンプルとより単純なデータを使用すると、すべてが正常に機能し、SemanticZoom を使用できます。
私の入力データによってはバグが発生するように見えるので、以下は生データの 2 つのスニペットですWinJS.Binding.List
。
現実世界のデータ、機能していません:(生成されたデータからjson文字列化されたもの)
var myCategories = [{ "id":"CAT_1_1", "title":"Category 1.1", "groupKey":0, "groupId":"CAT_1", "groupTitle":"Category 1" }, {...}];
サンプルデータ、動作中 : (手書き)
var myCategories = [ { group: 1, id: "1.1", title: "item 1.1" }, { group: 1, id: "1.2", title: "item 1.2" }, ];
参考までに: - バグはテンプレートに由来するものではありません。確認しました。
助けてくれてありがとう、私はこれで2日間苦労しました...