2016-02-24 172 views
0

嗯,我有两个的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

你可能想使用'$ index'。请参阅http://knockoutjs.com/documentation/foreach-binding.html#note-2-using-index-parent-and-other-context-properties –

+0

我知道大约$ index,在这种情况下需要我刚才说的 – user3857731

+0

你要求的是没有意义的。该foreach将立即遍历所有这些。你可以遍历代码中的所有代码。你想达到什么目的? –

回答

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>