ネストしたテーブルでノックアウトforeach

Question

私は少し独特の状況があります、私はノックアウトjsがこれを達成する方法を提供したいと思っています。

私は次の構造を持っている：

Order = function() { 
    var self = this; 
    self.Name = 'default'; 
} 

Customer = function() { 
    var self = this; 
    self.Name = 'default'; 
    self.Orders = []; 
} 

を私は次の表

<table> 
    <thead> 
     <tr> 
      <th>Customer Name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: CustomerArray"> 
     <tr> 
      <td data-bind="text: Name"></td> 
     </tr> 
    </tbody> 
</table> 

を持っているので、これは私にすべての私の顧客名のリストを与える、素晴らしいです。

ここでは、ステップ2のために、テーブルをリスト形式でフォーマットする必要があります。下部にある[顧客名順名、：

Customer Name (TH LABEL) 
Order1 
Order2 
Order3 
Smith, Frank 

は、私は各顧客の繰り返しの内部のtbody含むことによって、私のための配列を入れ子にするというアイデアを思い付いたが、私は列幅のため、このアプローチが気に入りません注文と顧客とは異なる表であるため、揃えられません。

誰も私の異常な問題を解決する良い方法はありますか？

ありがとうございました！

Answer 1

あなたは注文ごとにTDをレンダリングするために、「無容器制御フロー構文」（Note 4 on the foreach docs）を使用することができ、その後、含む要素のない顧客、：

<table> 
    <thead> 
     <tr> 
      <th>Customer Name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: CustomerArray"> 
     <!-- ko foreach: Orders --> 
     <tr> 
      <td data-bind="text: OrderDetails"></td> 
     </tr> 
     <!-- /ko --> 
     <tr> 
      <td data-bind="text: Name"></td> 
     </tr> 
    </tbody> 
</table> 

コメントブロックは同じように結合スコープを作成します1つはTBODYに含まれますが、含まれる要素はありません。

Answer 2

これは動作するはずです：

<table> 
    <thead> 
     <tr> 
      <th>Customer Name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: CustomerArray"> 
     <!-- ko foreach: Orders --> 
     <tr> 
      <td data-bind="text: Name"></td> 
     </tr> 
     <!-- /ko --> 
     <tr> 
      <td data-bind="text: Name"></td> 
     </tr> 

    </tbody> 
</table> 

私はそれが役に立てば幸い。