javascript - metro Javascript。项目分组错误。 ui.js firstItemIndexHint 属性

Question

好吧，我把要在 ListView 中呈现的项目分组错误搞得焦头烂额。当我通过 WinJS.UI.setOptions 将项目/组数据源设置到列表时，我在 ui.js 中的第 16812 行出现错误，提示“无法获取未定义或空引用的属性‘firstItemIndexHint’” .

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

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

ready函数中的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,
        });

html页面代码

 <!-- 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, 
    });