Windows 8 WinJS:将ListView itemDataSource与List.groups.dataSource绑定失败

我正面临一个非常恼人的行为：分组

WinJS.Binding.List

在尝试创建SemanticZoom时，我使用

列表.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>


此代码有效，但在我需要组时显示详细类别：

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


由于bug的发生似乎取决于我的输入数据，下面是两段原始数据，我用它们定义了一个
WinJS.Binding.List
：

真实世界的数据，不工作：（json从我生成的数据字符串化）


样本数据，工作：（手写）


供参考：
-我检查过，这个bug不是来自模板

谢谢你的帮助，我已经为此挣扎了两天了…
我终于找到了问题：

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

返回的键必须是字符串，而实际数据返回的是INT。改变这一点解决了问题

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

希望这会有所帮助。
很好的发现。我建议将你的答案放在“答案”部分，并标记为正确。否则，有类似困惑的人可以跳过这个问题，因为答案是“没有”。或者，试图回答的人可能会花5分钟阅读并理解你的问题，直到最后知道你已经解决了。只是一个善意的建议：）
data-win-options="{
    itemDataSource: Data.myCategories.dataSource,
    itemTemplate: select('#zoomedOutItemTemplate'),
    groupDataSource: Data.myCategories.groups.dataSource
}"

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" },
];