Question

I’m triyng to bind an array of object to td elements of a table to achieve dinamyc columns.
The viewmodel is:

<script type="text/javascript">

function rowObject() {
    this.chid = 100;
    this.chname = 'child';
    this.numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}

function masterVM() {
    this.id = 1;
    this.name = 'xxx';
    this.rowObjects = [new rowObject(),new rowObject(), new rowObject()];
}

ko.applyBindings(new masterVM());

</script>

And the html view is:

<tbody data-bind="foreach: rowObjects">
    <tr>
        <td data-bind="text: chid" />
        <td data-bind="text: chname" />

        <!-- ko foreach: numbers-->
            <td data-bind="text: $data"></td>
        <!-- /ko -->

    </tr>
</tbody>

But in the $data there is an instance of rowObject and not an element of number array. I tried with template but same problem.

There is a way to achieve this behavior?

Answer 1

I made 2 examples that show how to do this. One with a UL and the other with a table (just to make sure I wasn’t nuts). http://jsfiddle.net/johnpapa/8wYRf/

I believe your issue is caused by using <td/> instead of <td></td>. That catches me once in a while too with span’s. Just remember to use open and close tags with KO data bindings.