Using Knockout to Populate Bootstrap Rows and Spans

Question

Well essentially I\'m trying to populate a Bootstrap template via Knockout and a JSON object.

Bootstrap scaffolding:

Answer 1

Make a computed observable which slices apps observable/observable array into arrays of three elements, and then bind some root element to it with foreach binding. Something like this.

Observable:

viewModel.appRows = ko.computed(function() {
    var apps = this.Apps();
    var result = [];
    for (var i = 0; i < apps.length; i += 3) {
        var row = [];
        for (var j = 0; j < 3; ++j) {
            if (apps[i + j]) {
                row.push(apps[i + j]);
            }
        }
        result.push(row);
    }
    return result;
}, viewModel);

Markup: