Windows 8 WinJS在表中呈现listView

我正在开发HTML/JS Win8商店应用程序。我想在表中呈现ListView。我将如何实现这一点

现在我有这样的东西：

        <table id="products">
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                <tr data-win-control="WinJS.Binding.Template" id="productsRowTemplate">
                    <td data-win-bind="textContent: name"></td>
                    <td data-win-bind="textContent: description"></td>
                </tr>
            </tbody>
        </table>

        <div id="productsListView"
            data-win-control="WinJS.UI.ListView"
            data-win-bind="winControl.itemDataSource: products.dataSource;"
            data-win-options="{ 
            itemTemplate: select('#productsRowTemplate'), 
            layout: { type: WinJS.UI.ListLayout }
            }">
        </div>

名称
描述

然而，结果并不是我所期望的：

我希望达到与此类似的效果（在我看来，我使用了该示例中的样式）：

---

我使用listView的原因是我正在使用ViewModels，它通过属性公开集合—我只想将数据绑定到视图，并使用特定的模板显示它。我绝对不想从视图的代码后面动态创建表。

如果您的目标是呈现表，那么ListView不是您想要的。关键是将集合（数据源）的概念与用于表示它的控件分开。这就是为什么有一个WinJS.Binding.List集合类和一个WinJS.UI.ListView控件作为单独的实体

表格是展示集合的一种方式；列表视图是另一种。因此，试图将两者结合起来是没有意义的。在标记中，模板元素实际上将从DOM中删除，而不会呈现在表中。ListView将尝试使用该模板来呈现自己，但由于它在自己的div（在a之外）中生成和元素，因此它实际上无法工作。也就是说，数据源中的每个项的模板都作为声明ListView的div的子项呈现，而不是在声明模板的位置呈现

尽管可以将ListView声明为表的子级，但它在表中也不起作用，因为ListView在声明它的元素下面创建了一个深div结构

因此，出于这个目的，将ListView计算出来。相反，您需要的是一个简单的自定义控件，它可以接受WinJS.Binding.List并将模板呈现为该控件的直接子控件。在Windows8.1预览版中，有一个名为Repeater的新控件正是为了实现这一目的，并在。请注意，您希望对标题使用，并在上声明控件，以便它可以呈现作为根元素的模板副本

当然，如果您的目标是Windows 8，您将不会有转发器，但创建自己的转发器并不太复杂（如果您愿意，可以从Win8.1转发器源借用）。使用WinJS.Class.Define定义一个构造函数，并确保您有一些选项，可以通过这些选项声明性地指定数据源和模板。该模板将包含数据绑定属性。在控件的构造函数中，遍历Binding.List，为列表中的每个项呈现模板的副本。然后使用该项的根元素和数据源中的项调用WinJS.Binding.processAll，这将设置所需的数据绑定

您需要在tbody元素上再次声明此控件，以便它在正确的位置创建tr子级。要使用Repeater示例（其中它使用内联模板），请执行以下操作：

IdDescription

---

最后，您将动态创建表，但它被封装在控件中，因此您可以以声明的方式设置数据绑定关系。

感谢您的全面回答。我之所以尝试使用ListView，是因为我试图实现与您提到的Repeater控件（模板化为表行的项列表）类似的功能。多亏了你的回答，我现在明白了为什么我的方法是无效的。

<table class="table">
  <thead class="table-header"><tr><td>Id</td><td>Description</td></tr></thead>
    <tbody class="table-body"
      data-win-control="WinJS.UI.Repeater" data-win-options="{data: Data.items}">
      <tr class="table-body-row">
          <td data-win-bind="textContent: id"></td>
          <td data-win-bind="textContent: description"></td>
      </tr>
  </tbody>
</table>