Table is not refreshed with knockoutjs

Question

I am using knockoutJs with a simple 2d array to table binding. The table gets rendered ok, the click function gets fired ok and even the rightindex is getting updated. but the UI doesnt get refresehd.

This is my Code:

The HTML:

<table>
    <tbody data-bind="foreach: representation ">
        <tr data-bind="foreach: $data, click: $parent.clickMe">
            <td data-bind="text: $data ">
            </td>
        </tr>
    </tbody>
</table>

The JS:

$(function () {


    var ViewModel = function () {
        var self = this;
        self.clickMe = function (data, event) {
            var target;
            if (event.target) target = event.target;
            else if (event.srcElement) target = event.srcElement;

            if (target.nodeType == 3) // defeat Safari bug
                target = target.parentNode;

            self.representation()[target.parentElement.rowIndex][target.cellIndex] = 1;
        };

        self.representation = ko.observableArray([
                    [0, 0, 0],
                    [0, 0, 0],
                    [0, 0, 0]
                ]);
    };
    ko.applyBindings(new ViewModel());
});

What am I missing here?

score 1 · Accepted Answer · answered Apr 08 '13 at 20:22

If you want the individual values in each representation to update the UI, then you need to make them observables too, I'd guess:

 self.representation = ko.observableArray([
     [ko.observable(0), ko.observable(0), ko.observable(0)],
     [ko.observable(0), ko.observable(0), ko.observable(0)],
     [ko.observable(0), ko.observable(0), ko.observable(0)]
 ]);

And then update them using:

self.representation()[target.parentElement.rowIndex][target.cellIndex](1);

Table is not refreshed with knockoutjs

1 Answers1