KnockoutJS 无容器控制流：在表中绑定 td答案

【问题标题】：KnockoutJS containerless control flow: binding td in tableKnockoutJS 无容器控制流：在表中绑定 td
【发布时间】：2012-02-05 14:43:50
【问题描述】：

我正在尝试将对象数组绑定到表的 td 元素以实现 dinamyc 列。视图模型是：

<script type="text/javascript">

function rowObject() {
    this.chid = 100;
    this.chname = 'child';
    this.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}

function masterVM() {
    this.id = 1;
    this.name = 'xxx';
    this.rowObjects = [new rowObject(),new rowObject(), new rowObject()];
}

ko.applyBindings(new masterVM());

</script>

而html视图是：

<tbody data-bind="foreach: rowObjects">
    <tr>
        <td data-bind="text: chid" />
        <td data-bind="text: chname" />

        <!-- ko foreach: numbers-->
            <td data-bind="text: $data"></td>
        <!-- /ko -->

    </tr>
</tbody>

但是在 $data 中有一个 rowObject 的实例，而不是一个数字数组的元素。我尝试使用模板但同样的问题。

有办法实现这种行为吗？

【问题讨论】：

标签： knockout.js

【解决方案1】：

我做了 2 个例子来说明如何做到这一点。一个带有 UL，另一个带有桌子（只是为了确保我没有疯掉）。 http://jsfiddle.net/johnpapa/8wYRf/

我相信您的问题是由使用<td/> 而不是<td></td> 引起的。 Span's 也时不时地抓住了我。只要记住在 KO 数据绑定中使用打开和关闭标签。

【讨论】：

【解决方案2】：

你很接近。您只需要确保指定您的 td 并带有开始和结束标签，例如：

<td data-bind="text: chid"></td>
<td data-bind="text: chname"></td>

这是一个示例：http://jsfiddle.net/rniemeyer/2864E/

【讨论】：