Reassigning a view model?

5 posts, 0 answers
  1. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 29 Oct 2013 Link to this post

    I am using Kendo UI MVVM system for my view models in Javascript, and I am loving it. But I am having an issue come up in situations where I want to set an ENTIRE view model to be filled with the data I get back from a server. For instance...

    var viewModel = kendo.observable({
        Name : null,
        Properties : []
    });
    Let's assume for a moment that this has 17 or so more properties. Instead of doing this ...
    viewModel.set("Name", $object.Name);
    viewModel.set("Properties", $object.Properties);
    over and over, is there a way to just set the entire thing to the data received?
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 30 Oct 2013 Link to this post

    Hi Stacey,

    Unfortunately there is not a way to automatically update the viewModel with the data from the server, and you need to set the properties after they are received from your remote service. 
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 30 Oct 2013 Link to this post

    Hey there, I have actually solved this with a short function that I think the entire Kendo library could use. It may need to be further refined, though.

    kendo.data.ObservableObject.prototype.fromJSON = function (source) {
        var name,
            observable = this;
     
        for (name in source) {
            if (observable.hasOwnProperty(name)) {
                observable.set(name, source[name]);
            }
        }
    }
    This will accept a javascript object, it does not yet check for functions or miscellaneous properties - but since it requires the destination to have the same properties that it moves over, it has yet to give me any trouble. It just iterates over the object and runs the Observable 'set' method on each top level item.
    change: function (e) {
        // get the selected row from the grid
        var selected = this.select();
        // get the data from the selected row
        var data = this.dataItem(selected);
        // update the model
        viewModel.fromJSON(data.toJSON());
    },
    This gives you an updated model that is still ready for binding, without all of the extra code. It is also more inline with those who are accustomed to the KnockoutJS "mapping" plugin.
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2596 posts

    Posted 01 Nov 2013 Link to this post

    Hello Stacey,

    Thank you for sharing your code with us. I am sure that it will be helpful for the people looking for the same approach.

    Thanks again for your cooperation.\
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Stacey
    Stacey avatar
    56 posts
    Member since:
    Aug 2013

    Posted 04 Nov 2013 Link to this post

    Hey Kiril, I just thought I would give an update. I am so far using this code successfully in two projects and it is amazing. This has helped to bridge a gap that was missing without a mapping plugin like Knockout. I have added some updated versions to it, which I am posting below.

    kendo.data.ObservableObject.prototype.fromJS = function (source) {
        var name,
            value,
            observable = this;
     
        for (name in source) {
            if (source.hasOwnProperty(name)) {
                value = source[name];
                if (typeof value !== "function" && name !== "_events" && name !== "uid") {
                    observable.set(name, source[name]);
                }
            }
        }
    }
    kendo.data.ObservableObject.prototype.fromJSON = function (source) {
        var name,
            observable = this;
     
        for (name in source) {
            if (observable.hasOwnProperty(name)) {
                observable.set(name, source[name]);
            }
        }
    }


Back to Top