Knockout.js 递增嵌套foreach循环中的计数器

是否有一种方法可以从敲除

foreach

绑定中手动增加ViewModel属性

我想做一些逻辑上等同于：

var inc = 0;
for (var i = 0; i < 3; i++)
{
    for (var j = 0; j < 3; j++)
    {
        inc++;
        alert(inc + ': ' + i + ',' + j); // but write this to the dom
    }
} 

---

使用展平阵列为以下对象创建计算可观测对象：

var ViewModel=function（）{
var self=这个；
self.Categories=ko.array([
{类别：'A'，子类别：[1,2,3]}，
{类别：'B'，子类别：[1,3]}
]);
self.flattedSubcategories=ko.computed（函数（）{
var result=[]，cats=self.Categories（），index=1；
对于（变量i=0；i

:
,
您可以将
/
与数字计数器或计数器一起使用

如果该数字仅用于显示目的，且不依赖于任何内容，则此功能有效


var ViewModel=function（）
{
var self=这个；
self.Categories=ko.array([
{类别：'A'，子类别：[1,2,3]}，
{类别：'B'，子类别：[1,3]}，
{类别：'C'，子类别：[7,8,9]}，
{类别：“D”，子类别：[10,11,12,13]}
]);
}
应用绑定（新的ViewModel（））
.categories{
计数器重置：类别；
}
.子类别：：之前{
反增量：类别；
内容：柜台（类）“：”；
}
无需将此操作变得更加复杂。您可以尝试以下方法：


var ViewModel=function（）{
var self=这个；
var指数=0；
self.inc=功能（val）{
返回++索引；
}
self.Categories=ko.array([{
类别:"A",，
子类别：[1、2、3]
}, {
类别:"B",，
子类别：[1,3]
}]);
};
应用绑定（新的ViewModel（））




另一种选择：

正如您所说，knockout绑定上下文公开了一个可观察的
$index
，它将索引保存在循环中。还有一个
$parentContext
用于引用链中较高的上下文

对于简单的两级嵌套循环，您可以创建一个助手方法，该方法使用当前的
$index
和父级的
$index
来计算总索引：

// cIndex = current category's index
// sIndex = current subcategory's index
self.getSubIndex = function(cIndex, sIndex) {
  return sIndex + self.Categories
    .slice(0, cIndex)
    .reduce(function(count, c) {
      return count + c.SubCategories.length;
    }, 0);
}

不过，写这篇文章会有点烦人：

<span data-bind="text: $root.getSubIndex($parentContext.$index(), $index())">   </span>





这也很有效。有时候，嵌套
foreach
以创建特定的HTML结构是很有用的，但在本例中，这并没有什么区别。我的实际模型要复杂得多（为了一个简单的StackOverflow示例，我尝试将其简化）。我正在生成一个更复杂的HTML结构，因此有序列表将无法工作。计算出的展平数组可以工作，但我必须对其进行查找。我想我可能需要将“索引”服务器端计算为数据元素之一。不过谢谢，这很有帮助！我想你会有更复杂的（子）类别对象。根据实际数据和视图模型，我的解决方案只能在一定程度上确定有效。-我不确定你所说的“必须对其进行查找”是什么意思，但你可能需要在这个主题上提出一个单独的问题，并进行重新排序。这非常适合（我的需要）。我可以创建另一个方法来获取当前递增器/只需在对象上公开内部递增器，
self.incrementer=0
，我认为这将不起作用，在有可观察对象的实际场景中不起作用。每次重新评估
文本
绑定时（例如，每当类别名称发生变化时，如果可以观察到），都会再次调用
inc
函数，而不会将编号重置回0。正确的话，您必须考虑数组的变化。Jeroen已经说明了一个很好的观点。如果您不打算修改数组中的数据，那么可以继续上面的内容，但在大多数真实场景中，您将对数组进行修改，而且，您已经看到了上面他的小提琴。。。
<span data-bind="text: $root.getSubIndex($parentContext.$index(), $index())">   </span>