绑定到过滤的对象属性敲除嵌套的 foreach答案

【问题标题】：bind to filtered object property knockout nested foreach绑定到过滤的对象属性敲除嵌套的 foreach
【发布时间】：2017-01-31 20:52:24
【问题描述】：

我试图理解 $parent、$data 并试图根据 $parent 值过滤掉对象数组。

<p>My kids:</p>
    <ul data-bind="foreach: kids">
        <li> <span data-bind="text: $data" ></span>      
              <ul data-bind="foreach: grandKids.filter(function (obj) { return obj.mother === $parent })">
                 <li><span data-bind="text: $data.name"></span></li>                      
             </ul>
         </li>
      </ul>


    <script src="Scripts/knockout-3.4.1.js"></script>
    <script>
        var vm = {
            name : ko.observable("Anjan"),
            age: ko.observable(40),
            kids: ["Mira", "Teresa"],
            grandKids: [
                         { name: "Andy", mother: "Mira" }, 
                         { name: "Alice", mother: "Mira" }, 
                         { name: "Alex", mother: "Teresa" }, 
                         { name: "Abby", mother: "Teresa" }
                       ]
        };

【问题讨论】：

标签： javascript arrays object knockout-2.0 knockout-3.0

【解决方案1】：

对于遇到将元素绑定到过滤集合中的此类问题的任何人，我相信还有其他方法可以做到这一点，但我解决此问题的方法是使用无容器 KO 绑定，如下面：

<ul data-bind="foreach: kids">
                <li>                         
                    <span data-bind="text: $data.name" > </span>  
                     <button data-bind="click: $parent.removeKid">Remove (moved out)</button> 
                     <button data-bind="click: $root.addGrandKid" style="float:right;">Just had a baby</button>

                    <ul data-bind="foreach: vm.grandKids">
                        <!--ko if: $parent.name() == $data.mother() -->
                            <li>                    
                                <!--ko $data.name() --><!-- /ko -->

                            </li>  
                        <!-- /ko-->                    
                    </ul> 

                  </li>            
            </ul>

我仍然不清楚为什么我需要在无序列表的 UI 绑定中将 grandKids 属性完全限定为 vm.grandKids。

【讨论】：