Question

Can someone show me how to create a table in knockout for an observableArray for a viewModel like below:

I know you use a foreach binding and all that, but I need to create a new TR row every 5 array items. I need the table to only be so far across and have aligned checkbox items basically. I got it to work without tables just adding a bunch of checkboxes to a div (but the checkboxes weren’t all lined up), but I want a table to keep things lined up in cells nicely.

Here is an article I posted with some code I did, but I was attempting to put them all in one TR but that won’t work and here is another guy trying to do something similar but not using knockout…

I know how to do what I want using regular jquery and external template engine, but I am trying to keep away from jquery if there is a nice knockout binding template way of doing it all.

I might add some bootstrap classes to the table stuff to but not sure, I am using this framework for other parts of my website too. But more focus on the knockout stuff.

Article 1

Article 2

function someModel() {
    var self = this;
    self.items = ko.observableArray([]); 
}

array items are a class like this :

function item(name, id) {
    var self = this;
    self.Name = name;
    self.Id = id;
}

Answer 1

When you need more complex data structuring I recommend using a dependent observable to do it. I’m assuming you want a series of rows each with up to 5 tds.

function someModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.items_grouped = ko.computed(function(){
        var grouped = [];
        var itemlist = self.items();
        for(var i = 0; i < itemlist.length; i+=5){
            var row = [];
            grouped.push(row);
            for(var j = 0; j < 5; ++j){
                row.push(itemlist[i+j]);
            }
        }
        return grouped;
    });
}

<table>
    <tbody data-bind="foreach: items_grouped">
        <tr data-bind="foreach: $data">
            <td>
                <span data-bind="text: Name"></span>
                <span data-bind="text: Id"></span>
            </td>
        </tr>
    </tbody>
</table>

You can of course make the clustering implementation cleaner using whatever libraries you have on hand.
On a side note, using tables for layouts is almost always a bad idea.