Knockout foreach mit verschachtelten Tabellen

Question

Ich habe ein bisschen eine einzigartige Situation, ich hoffe Knockout js bietet eine Möglichkeit, dies zu erreichen.

ich die folgende Struktur haben:

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

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

Ich habe folgende Tabelle

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

Also das ist groß, es gibt mir eine Liste aller meiner Kundennamen.

Jetzt für Schritt zwei, ich muss die Tabelle in einer Weise formatieren, die es auflistet. Name, dann Name des Kunden an der Unterseite:

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

kam ich auf die Idee, durch meine Bestellung Array der Verschachtelung eine tbody innerhalb eines jeden Kunden Iteration einschließlich, aber ich mag es nicht, diesen Ansatz, da die Spaltenbreite von Bestellung zu Kunde wird nicht ausgerichtet, da sie verschiedene Tabellen sind.

Hat jemand irgendwelche guten Möglichkeiten, um mein ungewöhnliches Problem zu lösen?

Vielen Dank!

Answer 1

Sie könnten „behälterlosen Ablaufsteuerung Syntax“ verwenden (Note 4 on the foreach docs) einen TD für jede Bestellung zu machen, dann den Kunden, ohne haltige Element:

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

Der kommentierte Block stellt einen verbindlichen Rahmen ebenso wie die eine auf TBODY, aber ohne das enthaltende Element.

Answer 2

sollte diese Arbeit:

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

Ich hoffe, es hilft.