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。

由于错误似乎取决于我的输入数据而发生，下面是我定义的原始数据的两个片段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。改变这个解决了这个问题。

这在常见的 Windows 8 快速入门中没有提到，混淆可能来自compare(leftKey, rightKey)使用组键计算排序标准并返回数字的函数。

希望这会有所帮助。

于 2013-06-05T13:59:05.243 回答