Windows 8 JS & html5 app - foreach in template

Question

如何在WinJS.UI.ListView控制范围内循环遍历WinJS.Binding.Template中的项目？

我的数据：

{ category: 'Sports', 
  items: [
    { title: 'soccer'}, { title: 'tennis'}
  ] 
}

我想在我的模板中做什么：

<div id="myTmpl" data-win-control="WinJS.Binding.Template" style="display:none">
  <h1 data-win-bind="innerText: category"></h1>
  <div data-win-REPEATER="each: items">
    <span data-win-bind="innerText: title"></span>
  </div>
</div>

Answer 1

因为你想嵌套项目的细节，我建议你看看我对另一个问题的回答，它非常相似：

WinJS 列表视图和模板绑定

这包含所有基本细节。

也就是说，您没有理由不能在这里集成 JQuerys 模板 - 您只需要找到一种方法让它们使用 WinJS 模板/控制合约。

Answer 2

你检查过吗

http://code.msdn.microsoft.com/windowsapps/ListView-basic-usage-sample-fcc451db

通常循环是自动的（它会根据数据源信息完成）

<div id="listView" 
        class="win-selectionstylefilled"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ 
            itemDataSource: myData.dataSource, 
            itemTemplate: myTmpl, 
            selectionMode: 'none', 
            tapBehavior: 'none', 
            swipeBehavior: 'none', 
            layout: { type: WinJS.UI.GridLayout } 
        }"
    ></div>