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´m using bootstrap3 and wanted to have x objects per row, where x is depending on the window size e.g on the col class.

e.g i have elements with class :

col-lg-2 col-md-2 col-sm-3 col-xs-4

so

if xs then a row has 3 items

if lg then a row has 6 items ...

I extended the answer of rkhayrov to put it to work

/* determine the current bootstrap environment */
function findBootstrapEnvironment() {
    var envs = ['xs', 'sm', 'md', 'lg'];

    $el = $('
');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env
        }
    };
}


/* determine How many objs per row */
function determineObjectsPerRow(){
    switch(findBootstrapEnvironment()) {
        case 'xs':
            return 3;
            break;
        case 'sm':
            return 4;
            break;
        case 'md':
            return 6;
            break;
        case 'lg':
            return 6;
            break;
    }
}


        var objsPerRow= determineObjectsPerRow();

        for (var i = 0; i < apps.length; i += objsPerRow) {
            var row = [];
            for (var j = 0; j < objsPerRow; ++j) {
                if (apps[i + j]) {
                    row.push(apps[i + j]);
                }
            }
            result.push(row);
        }

i added a dependency to width and height, which are observables So the functions will be recomputed if window is resized

var base = {
    AppModel:function (data) {
        var self = this;
        self.data = ko.observable({
            documents:ko.observableArray([]),
            width:ko.observable($(window).width()),
            height:ko.observable($(window).height())
        });

        /* calculate rows based on bootstrap environment */
        self.appRows = ko.computed(function() {
            self.data().height();
            self.data().width();
            var apps = self.data().documents();
            var result = [];
            var objsPerRow= determineObjectsPerRow();

            for (var i = 0; i < apps.length; i += objsPerRow) {
                var row = [];
                for (var j = 0; j < objsPerRow; ++j) {
                    if (apps[i + j]) {
                        row.push(apps[i + j]);
                    }
                }
                result.push(row);
            }
            return result;
        }, self); 

    },
};

and the resize handler

$(window).resize(function(event) {
    vm.data().height($(window).height());
    vm.data().width($(window).width());
});

it just works like a Charme, the rows are generated nicely for each device-width

i leave it here if anyone needs to achieve the same