通過兩個無關的observableArray對象構建一個HTML表

Question

我試圖使用兩個截然不同的和不相關的observableArray對象來定義表的行和列，但我不知道是否/如何將foreach綁定嵌套在一起。

我實驗上的代碼非常簡單（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藝術圖片顯示我後，但我的標記綁定似乎是第一個「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

你只需要參考的父元素在以下綁定：

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