html中的knockout增量变量

时间:2016-02-24 18:47:31

标签: knockout.js

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

怎么做?

1 个答案:

答案 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>