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

Question

我使用 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 文件？

Answer 1

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

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

您还可以使用虚拟元素：

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

Answer 2

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

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

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

希望这可以帮助其他人为此苦苦挣扎-这只是一种解决方法，而不是解决方法。