Knockout data-bind three at a time

Question

How would I accomplish something like this in Knockout? Given the source is something like this ["One", "Two", "Three"]

<div>
    <p>
        <div>
            <div>One</div>
            <div>Two</div>
            <div>Three</div>
        </div>
        <div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
        </div>
    </p>
</div>

What you have done here is to recreate a table in the form of div's. In the dark days of table design we needed to do it like this. You should instead just create one div per row in array and use CSS to fix the layout. Also divs in p's are not valid — Anders, Feb 20 '14 at 07:18

score 0 · Answer 1 · answered Feb 20 '14 at 05:00

0

<div data-bind="foreach:someArrayContainingTheValues">
    <div data-bind="text:$data"></div>
</div>

Try the above

answered Feb 20 '14 at 05:00

TGH

38,769
12
102
135

score 0 · Accepted Answer · edited May 23 '17 at 12:28

I've created a JSFiddle to show a sample of how this can be achieved: http://jsfiddle.net/bxfXd/3509/

Markup:

<div class="outer" data-bind="foreach:itemsGrouped">
    <div class="inner">
        <!-- ko foreach: $data -->
            <div class="main" data-bind="text:$data"></div>
        <!-- /ko -->
    <div>
</div>

JS:

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"]));

For reference, the chunk method was taken from here, posted by @ninjagecko

Knockout data-bind three at a time

2 Answers2