これを使用するための(素晴らしいではありませんが)たくさんの方法があります:
通常、ビューでのバインドにより適した構造に配列をマッピングすることをお勧めします。したがって、行/セル構造にマップします。次に、行/セルを簡単にループして出力を生成できます。のように: http://jsfiddle.net/rniemeyer/EdXA2/
少し面倒ですが、次のこともできます。
<div class="container" data-bind="foreach: items">
<!-- ko if: $index() % 3 === 0 -->
<div class="row-fluid">
<div class="span4" data-bind="text: name"></div>
<!-- ko with: $parent.items()[$index() + 1] -->
<div class="span4" data-bind="text: name"></div>
<!-- /ko -->
<!-- ko with: $parent.items()[$index() + 2] -->
<div class="span4" data-bind="text: name"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
のように: http://jsfiddle.net/rniemeyer/pfzpq/
カスタム バインドの 1 つのアイデアは、配列と多数の列を受け取り、それを小さな配列に分割するバインドを作成することです。このようなもの: http://jsfiddle.net/rniemeyer/sHDnR/。
ko.bindingHandlers.arrayToRows = {
init: function(element, valueAccessor, all, vm, context) {
var rows = ko.computed(function() {
var options = ko.toJS(valueAccessor()),
data = options.data,
count = options.count,
rows = [], row;
for (var i = 0, j = data.length; i < j; i++) {
if (i % count === 0) {
if (row) {
rows.push(row);
}
row = [];
}
row.push(data[i]);
}
//push the final row
if (row) {
rows.push(row);
}
return rows;
}, null, { disposeWhenNodeIsRemoved: element });
ko.applyBindingsToNode(element, { foreach: rows });
return { controlsDescendantBindings: true };
}
};
カスタムバインディングが事後に要素をラップする別の考えがあります。もっと時間があるときにそれを試してみるかもしれません。