0

row-fluidobservableArray の 4 番目のオブジェクトごとに、クラスを使用して新しい div をレンダリングしようとしています。残念ながら、html スニペットを if ブロックに配置しても、何も達成されないようです。

これを達成する別の方法はありますか？

<!-- ko foreach: detailsVm.addresses -->
    <!-- ko if: $index() % 3 === 0 -->
    <div class="row-fluid">
    <!-- /ko -->

    <div class="span4">
        My Content
    </div>

    <!-- ko if: $index() % 3 === 0 -->
    </div>
    <!-- /ko -->
<!-- /ko -->
4

2 に答える 2

2

これを使用するための（素晴らしいではありませんが）たくさんの方法があります：

通常、ビューでのバインドにより適した構造に配列をマッピングすることをお勧めします。したがって、行/セル構造にマップします。次に、行/セルを簡単にループして出力を生成できます。のように: 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 };
    }
};

カスタムバインディングが事後に要素をラップする別の考えがあります。もっと時間があるときにそれを試してみるかもしれません。

于 2012-07-30T19:02:17.950 に答える
1

私はあなたがそれを修正したことを知っていますが、将来の考え: そのラッパー div を常に存在させ、4 行ごとに「流動的な」クラスのみを存在させることは、あなたのコンテキストでは有害でしょうか? そうでない場合は、不必要なマークアップをレンダリングするのは嫌いですが、このような反復状況では、CSS を使用する方が簡単な場合があるためです。何かのようなもの：

.container .row:nth-child(4n) {流動的なスタイル}

于 2012-07-30T23:52:40.167 に答える