淘汰赛2级数组中的多个foreach答案

【问题标题】：Multiple foreach in knockout 2 level array淘汰赛2级数组中的多个foreach
【发布时间】：2014-02-28 20:49:16
【问题描述】：

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

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

我想使用淘汰赛迭代这个集合，我得到了以下结果：

        <!-- 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 -->

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

提前致谢

【问题讨论】：

您需要更新您的问题以包括您如何应用您的淘汰赛绑定。最好创建一个小提琴，以便您可以复制您的问题。

标签： knockout.js multidimensional-array foreach

【解决方案1】：

虚拟绑定只是 cmets，有时会在浏览器尝试更正 HTML 标记时移动。在这种情况下，浏览器会按照 HTML 规范的要求用 <tbody> 标签包围您的 <tr> 标签。 <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

【讨论】：

【解决方案2】：

您遇到了一种极端情况，即当第二个  标记位于 <table> 内部时，Knockout 无法找到它。

以下标记会导致错误（在 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/

【讨论】：