Metro Javascript.对项目进行分组时出错.ui.js firstItemIndexHint 属性

Question

好吧，我正在用错误的方式将要呈现的项目分组到列表视图中。当我通过 WinJS.UI.setOptions 将项目/组数据源设置为列表时，我在 ui.js 第 16812 行收到错误，指出"无法获取未定义或空引用的属性'firstItemIndexHint'"。

我的应用程序中还有其他页面，其中分组工作正常，但这个似乎不起作用。我在所有这些中都使用相同的绑定方法，并且找不到导致此错误的它们之间的任何区别。

谁能告诉我是什么导致以下代码崩溃？谢谢。

就绪函数中的 JavaScript 页面代码：

        var arr = new Array();
        //fill in an array with sample data.
        //name property is the one used for grouping
        //nm is rendered in the item template.
        for (var i = 0; i < 10; i++) {
            arr.push({
                name: "group" + (i % 5),
                nm: "namer" + i,
            });
        }
        //create a list based on the array.
        var items = new WinJS.Binding.List(arr);
        //group items by the name property (key selector function) and 
        //use it for rendering the group template (group data function)
        var groupDataSource = items.createGrouped(
            function (item) {
                return item.name;
            },
            function (item) {
                return {
                    name: item.name,
                    click: function () {
                        nav.navigate("mynavpage.html");
                    }
                };
            });
         //get a reference to the listview control
         var listView = element.querySelector(".itemGroups").winControl;
         //set templates and datasources to listview
         //here's where calls to base.js/ui.js are made and where app fails.
         WinJS.UI.setOptions(listView, {
            groupHeaderTemplate: $(".headerTemplate")[0],
            itemTemplate: $("#itemTemplate1")[0],
            itemDataSource: items.dataSource,
            groupDataSource: groupDataSource.groups.dataSource,
        });

网页代码

 <!-- group header template -->
 <div class="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <h2 class="group-title" data-win-bind="textContent: name" role="link">
    </h2>
 </div>
<!-- item template -->
<div id="itemTemplate1" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="itemTemplate item1x1" id="item1">
        <div class="itemText">
            <h4 class="itemTitle win-type-ellipsis" data-win-bind="textContent: nm"></h4>
        </div>
    </div>
</div>
<!-- fragment section -->
 <div class="myPage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pageTitle">Page Title</span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <!-- listview Grid -->
        <div class="itemGroups" aria-label="List of groups" data-win-control="WinJS.UI.ListView"
            data-win-options="{ tapBehavior: 'toggleSelect' }">
        </div>
    </section>
</div>

Answer 1

您需要对

项目和组都使用 groupDataSource。

WinJS.UI.setOptions(listView, { 
        groupHeaderTemplate: $(".headerTemplate")[0], 
        itemTemplate: $("#itemTemplate1")[0], 
        itemDataSource: groupDataSource.dataSource, 
        groupDataSource: groupDataSource.groups.dataSource, 
    });