knockout.js foreach 在表中重复 td 元素，但不重复 tr 元素答案

【问题标题】：knockout.js foreach repeats td element in table, but not the tr elementknockout.js foreach 在表中重复 td 元素，但不重复 tr 元素
【发布时间】：2012-08-24 14:37:56
【问题描述】：

我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表格中的以下摘录。

    <tr data-bind="foreach: files, visible: (files() && files().length > 0)">
        <td data-bind="text: UploadPath" />
        <td data-bind="text: FileName" />
    </tr>

正在正确检索数据，但是 foreach 正在重复表中的 TD 元素而不是 TR。因此，如果有 100 个文件，则表中将有 200 列显示给用户。如何让 TR 元素重复 foreach 文件？

【问题讨论】：

标签： knockout.js html-table

【解决方案1】：

只需将“foreach”绑定放在下一个（外部）元素中：

<table data-bind="foreach: files, ...">
    <tr>
        ...

您还可以使用虚拟元素：

<!-- ko foreach: files -->
<tr>
    <td>
        ...
</tr>
<!-- /ko -->

【讨论】：

我是这样倾斜的，但我不知道我是否想要下一个表或不仅仅是显示文件数据。感谢您的快速响应。
如果您希望第一个 TD 元素与其他元素不同？

【解决方案2】：

我遇到了一件奇怪的事情：

我试图使用无容器绑定来重复多个表行。 KO 抱怨它找不到结束 /ko 标记。

我在无容器绑定上方定义了一个表头。如果我将其更改为标准表格行，一切都会按预期工作（除了我的标题没有所需的样式，但我覆盖了它）。

希望这可以帮助其他人解决这个问题 - 这只是一种解决方法而不是修复。

【讨论】：

遇到同样的事情，解决方法在这里：stackoverflow.com/a/8116017/423231
谢谢。我以为我已经研究得很彻底，但显然不是！现在一切都说得通了。