Reassigning a view model?

[Stacey]

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?

[Kiril Nikolov]

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

[Stacey]

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.

[Kiril Nikolov]

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

[Stacey]

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]);
        }
    }
}