WinJS：将 ListView itemDataSource 与 List.groups.dataSource 绑定失败答案

【问题标题】：WinJS : Binding ListView itemDataSource with List.groups.dataSource failsWinJS：将 ListView itemDataSource 与 List.groups.dataSource 绑定失败
【发布时间】：2012-11-08 11:18:39
【问题描述】：

我正面临分组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 的原始数据的两个 sn-ps：

真实世界的数据，不工作：（从我生成的数据中进行 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 天...

【问题讨论】：

不错的发现。我建议将您的答案放在“答案”部分并将其标记为正确。否则，有类似困惑的人可以跳过这个 Q，因为答案是“否”。或者有人试图回答可能会花 5 分钟阅读和理解您的问题，直到知道您已经解决了它。只是一个善意的建议:)

标签： windows-8 microsoft-metro winjs

【解决方案1】：

我终于找到问题了：

WinJS.Binding.List.createGrouped() 必须接收groupKey(itemData) 函数作为参数，该函数返回一个键来标识每个项目的组。

返回的键必须是 STRING，而我的真实数据返回的是 INT。改变这个解决了这个问题。

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

希望这会有所帮助。

【讨论】：