我有两个foreach:
<div data-bind="foreach : parent"> //parent count :5
<div data-bind="foreach: child"> // all children count together is 40
<div data-bind="text : counter" class="target"> </div>
</div>
</div
父母有5个或8个或x个孩子,孩子总和是40。 我想要实现的是.target文本应该是1到40:
<div class="target"> 1 </div>
<div class="target"> 2 </div>
...
<div class="target">40 </div>
怎么做?
答案 0 :(得分:1)
这里有两种方法。第一个是更加可靠,因为它实际上是为了根据索引找到你所在项目的数量。
第二个更像你最初要求的东西:每次通过内循环递增的东西。它“不太稳固”,因为如果你将它用于数据的另一次运行,它就会从它停止的地方继续计算。
var foo = 1;
vm = {
increment: function() {
return foo++;
},
counter: function(parentIndex, childIndex) {
var result = 1;
for (var i = 0; i < parentIndex; ++i) {
result += vm.parent[i].child.length;
}
result += childIndex;
return result;
},
parent: [{
child: [-1, -2, -3]
}, {
child: [-4, -5]
}, {
child: [-6, -7, -8, -9]
}]
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach : parent">
<div data-bind="foreach: child">
<div data-bind="text : $root.counter($parentContext.$index(), $index())" class="target"></div>
</div>
</div>
Or
<div data-bind="foreach : parent">
<div data-bind="foreach: child">
<div data-bind="text : $root.increment()" class="target"></div>
</div>
</div>