Set sub-objects of observable object

[Dr.YSG]

Is it possible to have a statement like:

vm.set("SysInfo.Browser", "Chrome");

Where SysInfo is defined in the Observable object as:

vm = kendo.observable({

        SysInfo = {

        status: "starting",

        xhr2: "false",

        browser: "",

        databases: "",

        center: "",

        date: "",

        zoom: 0

    }


[Dr.YSG]

The reason I ask is because I have a data-bound template 

<div  data-bind="source: SysInfo" data-template="SysInfoTemplate">Remove All DB Data</div>

I tried to change the value of SysInfo data, but it was not updating. I was doing things like

var sysInfo  = vm.get("SysInfo");
sysInfo.Browser = "Chrome";
vm.set("SysInfo", sysInfo);

But the values in the bound template were not updating.

This do work if I put everything at the top of the vm (and use 

data-bind="source: this"

[Alexander Popov]

Hi Yechezkal,

Yes, you can achieve this by using the set method, however I noticed that the observable is not declared properly. For convenience I prepared this small example - I hope it helps.

Regards,
Alexander Popov
Telerik

[Dr.YSG]

I noticed this syntax in your jsbin:

vm.set("SysInfo.browser", newBrowser);
vm.SysInfo.set("status", "stopping");

Does that mean that I could also do:

vm.SysInfo.set("browser", newBrowser);
vm.SysInfo.set("status", "stopping");

and if one of the items in SysInfo is a ObservableArray (which is MVVM bound to some elements) could I update the entire array at runtime by:

vm.SysInfo.set("DataArray", new kendo.data.ObservableArray(serverReplyJSON));

Or will this kill the binding, and what I need to do is first empty the array, and then push each item onto the array (which will cause N change events!).

[Alexander Popov]

Hello again,

Yes, the following notations are interchangeable: 

vm.set("SysInfo.browser", newBrowser);
vm.SysInfo.set("browser", newBrowser);

Additionally all arrays within an observable object are instance of kendo.data.ObservableArray, so you could just set the DataArray like so:  

vm.SysInfo.set("DataArray", serverReplyJSON); //assuming that serverReplyJSON is a valid JavaScript array

You can find a small example that illustrates similar behavior here.

Regards,
Alexander Popov
Telerik

[Dr.YSG]

Excellent. maybe this could be added as a note to the documentation for ObservableArray and ObservableObject?