Question

基本上我有以下二维数组：

"items": 
[
    ["",""],
    ["",""],
    ["",""]
]

我想使用knockout迭代这个集合，我得到了以下内容：

        <!-- ko foreach: items -->
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
            <!-- /ko -->

但是，这似乎不起作用。有什么想法吗？

提前致谢

Answer 1

虚拟绑定只是注释，有时可以在浏览器尝试更正HTML标记时移动。在这种情况下，浏览器会根据HTML规范的要求，使用<tr>标记围绕您的<tbody>标记。 <tbody>会在<tr>标记之前开始，并在结束</table>标记之前结束。因此，虚拟元素结束评论现在位于错误的位置：

<table>
    <!-- ko foreach: items -->
    <tbody>
        <tr>
            ...
        </tr>
        <!-- /ko -->
    </tbody>
</table>

解决此问题的关键是将<tbody>标记添加到标记中：

<table>
    <tbody>
        <!-- ko foreach: items -->
        <tr>
            ...
        </tr>
        <!-- /ko -->
    </tbody>
</table>

参考：http://www.whatwg.org/specs/web-apps/current-work/multipage/tree-construction.html#parsing-main-intable

Answer 2

你遇到了一个边缘情况，当Knockout在内部时无法找到第二个<table>标记。

以下标记会导致错误（在Chrome中，它会说Uncaught Error: Cannot find closing comment tag to match: ko foreach: items）：

<table>
<!-- ko foreach: items -->
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
<!-- /ko -->
</table>

小提琴：http://jsfiddle.net/63rkQ/

但是，如果您将外部foreach更改为<table>标记，则可以使用：

<table data-bind="foreach: items">
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> Column</button>
            </td>
            <!-- ko foreach: $data -->
            <td>
                <input type="text" class="form-control" data-bind="value: $data" />
            </td>
            <!-- /ko -->
        </tr>
</table>

小提琴：http://jsfiddle.net/63rkQ/1/

除非你绝对必须，否则尽量不要为绑定使用虚拟元素。我遇到过一些奇怪的情况，他们在某些浏览器上工作但在其他浏览器上工作。它们很难调试。

您可以看到在<table>之外移动虚拟元素也起作用（至少在Chrome中），但我认为这不是您想要的... ...

小提琴：http://jsfiddle.net/63rkQ/2/

淘汰2级阵列中的多个foreach

2 个答案: