Question

I’m trying to render a new div with the class row-fluid on every 4th object in my observableArray. Unfortunately putting html snippets into an if block doesn’t seem to accomplish anything.

Is there another way to accomplish this?

<!-- 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 -->

Answer 1

A bunch of (not awesome) ways to go with this one:

Normally, I would suggest mapping your array to a structure that is more suitable for binding in your view. So, you would map it to a row/cell structure. Then, you can easily loop through the rows/cells to produce your output. Like: http://jsfiddle.net/rniemeyer/EdXA2/

A little messier, but you could even do:

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

Like: http://jsfiddle.net/rniemeyer/pfzpq/

One idea for a custom binding would be to create a binding that takes in a array and a number of columns and splits it into smaller arrays for you. Something like this: 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 };
    }
};

I have one other thought where the custom binding would wrap the elements after the fact. Might give that a shot when I have more time.