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

I had to solve a very similar problem myself: rendering bootstrap grids with an observable array but with bootstrap v3 and ko v3.0. I'll leave my solution here for future reference.

I'm using a plain function instead of a computed one, since binding are implemented using them by default (see RP Niemeyer answer here https://stackoverflow.com/a/6712389/323751)

In my View Model:

this.partitioned = function (observableArray, count) {
    var rows, partIdx, i, j, arr;

    arr = observableArray();

    rows = [];
    for (i = 0, partIdx = 0; i < arr.length; i += count, partIdx += 1) {
        rows[partIdx] = [];
        for (j = 0; j < count; j += 1) {
            if (i + j >= arr.length) {
                break;
            }
            rows[partIdx].push(arr[i + j]);
        }
    }
    return rows;
};

Template:

Hope somebody find this useful.