KnockoutJS嵌套foreach内层循环中data-bind绑定失效问题求助

KnockoutJS的foreach绑定每嵌套一层，绑定上下文的$parent指向就会向上跳转一层：

• 无嵌套循环时，$parent直接指向根ViewModel
• 仅一层loop1循环时，循环内部的$parent指向根ViewModel，因此场景1、2绑定正常
• 场景3为两层foreach嵌套：内层loop2循环内部的$parent指向的是外层loop1的当前遍历项，而非根ViewModel，自然找不到根ViewModel上定义的testText属性和testbtn方法，导致绑定失效。

共有三种常用解决方案，可根据业务场景选择：

方案1：使用$root访问根ViewModel（最推荐） #

$root是KnockoutJS内置的上下文变量，永远指向最顶层的ViewModel，不受循环嵌套层级影响，修改后的代码如下：

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

方案2：使用多层$parent匹配层级 #

两层循环嵌套时，内层需要向上追溯两层才能访问到根ViewModel，因此将$parent改为$parent.$parent即可：

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

该方案适合需要访问上一级循环项属性的场景，嵌套层级过多时可读性较差。

方案3：为循环设置as别名 #

给每一层foreach绑定设置自定义别名，完全避免层级判断混乱，代码可读性最高：

<!-- ko foreach: { data: loop1(), as: 'styleColor'} -->
 <div class="standard-color" data-bind="foreach: { data: $parent.loop2(), as: 'loop2Item' }">                    
     Test::<span data-bind="text: $root.testText"></span>
     <button  data-bind="click: $root.testbtn"></button>
     <!-- 可直接通过别名访问各层循环项属性，比如styleColor.xxx、loop2Item.xxx -->
 </div>
<!-- /ko -->

内容的提问来源于stack exchange，提问作者Jimit Bhavsar