knockout.js नेस्टेड फोरैच एक्सेस बाहरी लूप प्रॉपर्टी

Question

मेरे पास knockout.js में नेस्टेड फ़ोरैच लूप है और मैं आंतरिक लूप के अंदर बाहरी लूप में वर्तमान ऑब्जेक्ट से किसी प्रॉपर्टी तक पहुंच बनाना चाहता हूं। यह मैं कैसे करूंगा?

<!-- ko foreach: graduationDateRows -->     
    <tr> 
    <td class="center" data-bind="text: CalendarYear"></td> 
    <!-- ko foreach: $root.graduationDatesHeaders --> 
    <td class="center" data-bind="text: /* !here! */"></td> 
    <td></td> 
    <!-- /ko -->                 
    </tr> 
<!-- /ko --> 

Answer 1

आप एक गुंजाइश स्तर ऊपर तक पहुँचने के लिए $parent उपयोग कर सकते हैं। तो, अपने भीतर के पाश से आप तक पहुँचने के लिए वर्तमान आइटम अपने graduationDateRows

Answer 2

में पर फंस जा रहा भीतरी पाश आप $parent.property_name उपयोग कर सकते हैं में मौजूदा वस्तु से बाहरी पाश में एक संपत्ति का उपयोग करने के parent उपयोग कर सकते हैं।

उदा .: salesInfo सरणी के

<ul id="salesInfo" data-bind="foreach : salesInfo "> 
    <li class="department"> 
     <a href="#" data-bind="text: name" /> 
     <ul id="salesDept" data-bind="foreach: years"> 
      <li class="years"> 
       <a href="#" data-bind="text: year, click:function(data, event) { $root.yearClicked(year,$parent.name,data) }" /> 
      </li> 
     </ul> 
    </li> 
</ul> 

नमूना वस्तु:

{ 
    "id" : "0", 
    "name" : "Human Resources", 
    "years" : [ 
     { "year" : "2012", "values" : [250000,350000,150000,220000,450000,180000] } 
    ] 
} 

Answer 3

तुम भी foreach में पूरी तरह से असंबंधित सरणियों$parent और as अलियासिंग का उपयोग कर के माध्यम से लूप बंधन कर सकते हैं।

पर विचार करें the following example:।

var VM = function(){ 
    this.rows = ['one','two','three']; 
    this.cols = [1,2,3,4,5]; 
} 
ko.applyBindings(new VM()); 

<table border="1"> 
    <tr> 
     <th></th> 
     <!-- ko foreach: cols --> 
     <th data-bind="text: $data"></th> 
     <!-- /ko --> 
    </tr> 
    <!-- ko foreach: {data: rows, as: 'row'} --> 
    <tr> 
     <th data-bind="text:row"></th> 
     <!-- ko foreach: {data: $parent.cols, as: 'col'} --> 
     <td data-bind="text:row + '/' + col"></td> 
     <!-- /ko --> 
    </tr> 
    <!-- /ko --> 
</table>