javascript - 通过两个不相关的 observableArray 对象构建一个 HTML 表格

Question

我试图使用两个不同且不相关的 observableArray 对象来定义表格的行和列，但我不知道是否/如何嵌套 foreach 绑定(bind)在一起。

我正在试验的代码非常简单 ( Fiddle repro here, with some CSS eyecandy ):

var vm = function(){
    this.rows = ko.observableArray([1,2,3]);
    this.cols = ko.observableArray(['A', 'B', 'C']);
};
ko.applyBindings(new vm());


<table>
    <tbody>
        <!-- First row: each with a 'cols' value -->
        <tr>
            <td></td>
            <!-- ko foreach: cols -->
            <th data-bind="text: $data"></th>
            <!-- /ko -->
        </tr>
        <!-- Subsequent rows: each first with a 'rows' value -->
        <!-- ko foreach: rows -->
        <tr>
            <th data-bind="text: $data"></th>
            <!-- ko foreach: cols -->
            <td data-bind="text: $data"></td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>
</table>

下面的 ascii-art 图片显示了我所追求的，但我的标记绑定(bind)似乎在第一个“empty td”之后停止:

┌────────┬────────┬────────┬────────┬────────┐
│empty th│(th) A  │(th) B  │   ...  │(th) N  │
├────────┼────────┼────────┼────────┼────────┤
│(th) 1  │empty td│empty td│   ...  │empty td│
├────────┼────────┼────────┼────────┼────────┤
│(th) 2  │empty td│empty td│   ...  │empty td│
├────────┼────────┼────────┼────────┼────────┤
│  ...   │   ...  │   ...  │   ...  │   ...  │
├────────┼────────┼────────┼────────┼────────┤
│(th) N  │empty td│empty td│   ...  │empty td│ 
└────────┴────────┴────────┴────────┴────────┘

KO 教程非常清楚，但看起来这两个数组必须以某种方式相关，所以我发现了很多关于对象或数组数组的问题，这些问题似乎不适用于此处......

我错过了什么？感觉好像我没有注意到一些明显的事情。

Answer 1

您只需要在以下绑定(bind)中引用父元素:

<!-- ko foreach: $parent.cols -->

所有代码:

<table>
    <tbody>
        <!-- First row: each with a 'cols' value -->
        <tr>
            <td></td>
            <!-- ko foreach: cols -->
            <th data-bind="text: $data"></th>
            <!-- /ko -->
        </tr>
        <!-- Subsequent rows: each first with a 'rows' value -->
        <!-- ko foreach: rows -->
        <tr>
            <th data-bind="text: $data"></th>
            <!-- Refer to $parent--> 
            <!-- ko foreach: $parent.cols -->
            <td></td>
            <!-- /ko -->
        </tr>
        <!-- /ko -->
    </tbody>
</table>

See fiddle