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. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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!
  5. 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!).

  6. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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!
  7. 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
Kendo UI is VS 2017 Ready