Knockout JS:foreach增加2

Question

在Knockout JS中,是否可以foreach将该增量增加2？类似的东西:

for (var i = 0; i < array.length; i += 2) {
    // Do stuff
}

我之所以这样做是因为我需要循环的数据是一个数组而不是一个对象.例:

viewModel = function () {
    this.facets = ["Sample", 100, "Sample 2", 200];
}

但是数据需要像这样显示:

<ul data-bind="foreach: facets"> <!-- Can this foreach be incremented by 2? -->
    <li>$data[$index]: $data[$index + 1]</li>
</ul>

任何帮助将不胜感激.

Answer 1

你可以为此编写一个自定义绑定处理程序,但我宁愿让模板免于这些丑陋的细节.

我建议写一个ko.computed:

function Model() {
    this.data = ko.observableArray(["Sample", 100, "Sample 2", 200])
    this.items = ko.computed(function() {
        var value = [];
        var data = this.data();
        for (var i=0; i<data.length; i+=2) {
            value.push({ key: data[i], value: data[i+1]);
        }
        return value;
    }, this);
}

var model = new Model();

现在,您可以items在模板中进行迭代并访问key和value.更新原始data数组将自动重建items计算的observable.

模板代码如下所示:

<ul data-bind="foreach: items">
    <li><span data-bind="text: key"></span>: <span data-bind="text: value"></span></li>
</ul>