我试图理解 $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" }
]
};
最佳答案
对于遇到这种将元素绑定(bind)到过滤集中的问题的任何人,我确信还有其他方法可以做到这一点,但我解决此问题的方法是使用无容器 KO 绑定(bind),如如下:
<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 绑定(bind)中将 grandKids
属性完全限定为 vm.grandKids
。
关于javascript - 绑定(bind)到过滤对象属性剔除嵌套 foreach,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41967279/