Knockoutjs.com - Simple list example

http://knockoutjs.com/examples/simpleList.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<div class="outer" data-bind="foreach:itemsGrouped">
    <div class="inner">
        <!-- ko foreach: $data -->
            <div class="main" data-bind="text:$data"></div>
        <!-- /ko -->
    <div>
</div>

CSS

.outer { width: 100%; border: 1px solid red; padding: 5px;}
.inner { width: 150px; display: block; border: 1px solid black; padding: 15px;}
.main { width: 100px; display: inline; border: 1px solid blue; padding: 5px;}

JavaScript

Array.prototype.chunk = function (chunkSize) {
    var array = this;
    return [].concat.apply([],
    array.map(function (elem, i) {
        return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
    }));
}

var SimpleListModel = function(items) {
    var self = this;
    
    self.items = ko.observableArray(items); 
    
    self.itemsGrouped = ko.computed(function () {
        return self.items().chunk(3);
    });
};
 
ko.applyBindings(new SimpleListModel(["One", "Two", "Three", "Four", "Five", "Six"]));