Set sub-objects of observable object

6 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 12 Dec 2013 Link to this post

    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
        }
  2. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 12 Dec 2013 Link to this post

    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"



  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 13 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Dec 2013 Link to this post

    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!).

  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 13 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Dec 2013 Link to this post

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