javascript - Table is not refreshed with knockoutjs -

i using knockoutjs simple 2d array table binding. table gets rendered ok, click function gets fired ok , rightindex getting updated. ui doesnt refresehd.

this 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 missing here?

if want individual values in each representation update ui, need 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 update them using:

self.representation()[target.parentelement.rowindex][target.cellindex](1);