Magento 2 : Knockoutjs data-bind not Working in Inner Loop

Question

Case 1: -- Working

HTML

Test::<span data-bind="text: $parent.testText"></span>
<button  data-bind="click: $parent.testbtn"></button>

JS

numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
 alert('click called..');
 var previousCount = this.numberOfClicks();
 this.numberOfClicks("Testtttt....");
}

Case 2: -- Working

HTML

<!-- ko foreach: { data: loop1(), as: 'styleColor'} -->
 Test::<span data-bind="text: $parent.testText"></span>
 <button  data-bind="click: $parent.testbtn"></button>
<!-- /ko -->

Case 3: -- Not working

HTML

<!-- ko foreach: { data: loop1(), as: 'styleColor'} -->
 <div class="standard-color" data-bind="foreach: $parent.loop2()">                    
     Test::<span data-bind="text: $parent.testText"></span>
     <button  data-bind="click: $parent.testbtn"></button>
 </div>
<!-- /ko -->

When i click on button, js function not calling. Thanks in advanced.

Answer 1

That's because you have added an additional layer, so $parent is now referencing the inner loop not the outer loop. To access the outer loop again try $parents[1].

See https://stackoverflow.com/questions/17069381/access-parents-parent-in-knockout-view-nesting-context for more info.