1

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 は適切に処理されていますが、ズームアウトされたビューは空です。

    より正確には、ズームアウトしたビューで:

    1. このコードは失敗します:

      data-win-options="{
    itemDataSource: Data.myCategories.groups.dataSource,
    itemTemplate: select('#zoomedOutItemTemplate')
}"

    2. このコードは機能しますが、グループが必要な間は詳細なカテゴリが表示されます:

      data-win-options="{
    itemDataSource: Data.myCategories.dataSource,
    itemTemplate: select('#zoomedOutItemTemplate')
}"

    3. このコードは機能し、以前に呼び出したときにグループが整形式であることを証明してcreateGroupedいますが、ズームアウトするメイングループのみを表示するにはズームアウトビューが必要なので、これを行うのは意味がありません:

      data-win-options="{
    itemDataSource: Data.myCategories.dataSource,
    itemTemplate: select('#zoomedOutItemTemplate'),
    groupDataSource: Data.myCategories.groups.dataSource
}"

  • サンプルとより単純なデータを使用すると、すべてが正常に機能し、SemanticZoom を使用できます。

私の入力データによってはバグが発生するように見えるので、以下は生データの 2 つのスニペットですWinJS.Binding.List。

  1. 現実世界のデータ、機能していません:(生成されたデータからjson文字列化されたもの)

    var myCategories = [{
    "id":"CAT_1_1",
    "title":"Category 1.1",
    "groupKey":0,
    "groupId":"CAT_1",
    "groupTitle":"Category 1" },
{...}];

  2. サンプルデータ、動作中 : (手書き)

    var myCategories = [
    { group: 1, id: "1.1", title: "item 1.1" },
    { group: 1, id: "1.2", title: "item 1.2" },
];

参考までに: - バグはテンプレートに由来するものではありません。確認しました。

助けてくれてありがとう、私はこれで2日間苦労しました...

4

1 に答える 1

0

私は最終的に問題を見つけました:

WinJS.Binding.List.createGrouped()groupKey(itemData)各アイテムのグループを識別するためのキーを返す関数をパラメーターとして受け取る必要があります。

返されたキーは STRING でなければなりませんが、実際のデータは INT を返していました。これを変更すると問題が解決しました。

compare(leftKey, rightKey)これは一般的な Windows 8 のクイック スタートでは言及されておらず、グループ キーを使用して並べ替え基準を計算し、数値を返す関数から混乱が生じる可能性があります。

これが役立つことを願っています。

于 2013-06-05T13:59:05.243 に答える