Windows 8 JS 和 html5 应用程序 - 模板中的 foreach答案

【问题标题】：Windows 8 JS & html5 app - foreach within templateWindows 8 JS 和 html5 应用程序 - 模板中的 foreach
【发布时间】：2012-11-19 15:36:06
【问题描述】：

如何在我的 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>

【问题讨论】：

标签： templates windows-8 microsoft-metro winjs

【解决方案1】：

因为要嵌套item的细节，建议你看我对另一个问题的回答，很相似：

WinJS ListView and Template Binding

这包含所有基本细节。

也就是说，你没有理由不能在这里集成 JQuerys 模板 - 你只需要找到一种方法让它们与 WinJS 模板/控制合同一起工作。

【讨论】：

【解决方案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>

【讨论】：

我不建议将列表视图用于基本列表场景。 List View 控件是一个复杂、丰富且功能齐全的控件。但是，如果你只是想要一个简单的测试项目列表，那就太矫枉过正了。
即使您认为这是一个复杂的控件，它也是所有微软工程师在 WOWZAPP - Hackathon for Windows 中建议的控件。这个想法是为了让 WINJS 中的开发更容易，他不需要编写大量代码（如你所建议的）来做已经实现的事情。如果 listview 如此“复杂”，为什么在微软提供给开发人员的所有模板中使用/建议的解决方案？ stephenwalther.com/archive/2012/05/18/…
对于初级体验来说，这很棒。但是对于在一个简单的项目模板中放置一个列表，这很愚蠢。这太疯狂了。而且，最重要的是，它不受支持——您不能在列表视图中嵌套列表视图。 Listview 是一个很棒的控件，但它不是用于消除事物的控件。它不是 WPF ItemsControl 的 WinJS 版本。太重了。