Metro Javascript。分組項目時出錯。 ui.js firstItemIndexHint屬性

Question

嗯，我把我的頭髮拉出一個錯誤分組項目以在列表視圖中呈現。 當我通過WinJS.UI.setOptions將items/groups數據源設置到列表中時，我在第16812行的ui.js中發現錯誤，說「無法獲取未定義的屬性'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> 

Answer 1

您需要使用groupDataSource的項目和團體兩種。

​​