नेस्टेड टेबल के साथ नॉकआउट फोरच

Question

मेरे पास एक अनोखी स्थिति है, मुझे उम्मीद है कि नॉकआउट जेएस इसे पूरा करने का एक तरीका प्रदान करता है।

मैं निम्नलिखित संरचना है:

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) प्रत्येक आदेश के लिए एक टीडी, तो ग्राहक, एक युक्त तत्व के बिना रेंडर करने के लिए:

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

टिप्पणी की ब्लॉक की तरह एक बाध्यकारी गुंजाइश बनाता है टीबीओडीवाई पर एक, लेकिन युक्त तत्व के बिना।

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> 

मुझे आशा है कि यह मदद करता है।