javascript - KnockoutJS + KoGrid - observable array as child of ko.observable(object) does not trigger update -

context
i'm exploring knockoutjs, combined kogrid.
have object containing several fields (which bound fields), , list of child objects want show in kogrid.

jsfiddle
i've prepared jsfiddle illustrating issue i'm having:
http://jsfiddle.net/kpmaj/4/

the issue:
viewmodel contains observable foo, containing parent object.
in parent object, there property children, observablearray containing objects again.

the kogrid bound $root.foo().children

this works if array filled before initializing binding.
however, object gets replaced afterwards (data loaded through ajax , can re-loaded), , apparently kogrid items binding lost.

i thinking that, since foo-object on viewmodel observable, trigger kogrid watching array inside update if foo gets replaced. work foreach-binding.

apparently kogrid doesn't trigger though.

--

am doing wrong here, or have hit issue in kogrid?

code (for reference purposes. see fiddler ;))

var sampleobject = function (data) {     this.id = new ko.observable(data ? data.id : null);     this.children = new ko.observablearray([]);      if(data) {         var childrenmapped = [];         $(data.children).each(             function()  {                 childrenmapped.push(new samplechildobject(this));             }         );         this.children(childrenmapped);     } }  var samplechildobject = function (data) {     this.name = new ko.observable(data ? data.name : null); };   var vm = {     foo: new ko.observable('john doe'),     bar: new ko.observable(             new sampleobject(             {                 id: 1234,                 children: []             })         ) };  ko.applybindings(vm);  // returns ajax-call instead, can't before applybindings vm.bar(new sampleobject(             {                 id: 1234,                 children: [                     { name: 'test1' },                     { name: 'test2' },                     { name: 'test3' }]             })); 

-

<div style="height: 500px;" data-bind="kogrid: { data: bar().children }"></div>  <ul data-bind="foreach: bar().children">     <li data-bind="text: name"></li> </ul> 

thanks!

what's happening kogrid binding doesn't have update handler, it's not responding changes in bar.

the kogrid watch observable array children though, if we're replace values in bar().children returned ajax call grid update.

like this:

function (data) {      var childrenmapped = [];      $(data.children).each(          function()  {              childrenmapped.push(new samplechildobject(this));  });     bar().children(childrenmapped);      bar().id(data.id); 

});

you should checkout mapping plugin supposed solve problem. ko mapping