Нокаут foreach с вложенными таблицами

Question

У меня есть немного уникальная ситуация, я надеюсь, что нокаут js обеспечивает способ для этого.

I имеют следующую структуру:

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> 

Так что это здорово, это дает мне список всех моих имен клиентов.

Теперь для второго шага я ДОЛЖЕН форматировать таблицу таким образом, чтобы она отображалась. Название заказа, затем Имя клиента на дне:

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

Я пришел с идеей вложенности моего массива заказа путем включения TBODY внутри каждой итерации клиента, но мне не нравится этот подход, поскольку ширина столбца от заказа к клиенту не выравниваются, так как они разные таблицы.

Есть ли у кого-нибудь хорошие способы решения моей необычной проблемы?

Спасибо!

Answer 1

Вы можете использовать «синтаксис containerless управление потоком» (Note 4 on the foreach docs) для визуализации TD для каждого заказа, то клиент, без содержащего элемент:

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

Закомментированный блок создает привязки рамки так же, как один на 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> 

Я надеюсь, что это помогает.