1

さて、リストビューでレンダリングするアイテムのグループ化エラーで髪を引っ張っています。WinJS.UI.setOptions を使用してアイテム/グループ データソースをリストに設定すると、ui.js の 16812 行で「未定義または null 参照のプロパティ '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,
        });

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>
4

1 に答える 1

3

アイテムとグループの両方に groupDataSource を使用する必要があります。

WinJS.UI.setOptions(listView, { 
        groupHeaderTemplate: $(".headerTemplate")[0], 
        itemTemplate: $("#itemTemplate1")[0], 
        itemDataSource: groupDataSource.dataSource, 
        groupDataSource: groupDataSource.groups.dataSource, 
    });
于 2012-06-16T01:43:37.597 に答える