Knockout foreach con tabelle nidificate

Question

Ho un po 'di una situazione unica, sto sperando che knockout js fornisce un modo per realizzare questo.

Ho la seguente struttura:

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

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

Ho la seguente tabella

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

Quindi questo è grande, mi dà un elenco di tutti i miei nomi dei clienti.

Ora per il secondo passaggio, DEVO formattare la tabella in modo che sia elencata. Nome ordine, il Cliente nome in fondo:

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

mi è venuta l'idea di nidificazione mio allineamento di ordine includendo un tbody all'interno di ogni iterazione del cliente, ma non mi piace questo approccio in quanto la larghezza della colonna di dall'ordine al cliente non si allineano poiché sono tabelle diverse.

Qualcuno ha qualche buon modo per risolvere il mio insolito problema?

Grazie!

Answer 1

Si potrebbe usare "sintassi controllo di flusso containerless" (Note 4 on the foreach docs) per rendere un TD per ogni ordine, il cliente, senza un elemento di contenimento:

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

Il blocco commentato crea un ambito vincolante come la uno su TBODY, ma senza l'elemento contenitore.

Answer 2

Questo dovrebbe funzionare:

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

spero che aiuta.