This is a migrated thread and some comments may be shown as answers.

Reassigning a view model?

4 Answers 34 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 29 Oct 2013, 10:31 PM
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?

4 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 30 Oct 2013, 01:04 PM
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!
0
Stacey
Top achievements
Rank 1
answered on 30 Oct 2013, 07:06 PM
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.
0
Kiril Nikolov
Telerik team
answered on 01 Nov 2013, 09:07 AM
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!
0
Stacey
Top achievements
Rank 1
answered on 04 Nov 2013, 07:10 PM
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]);
        }
    }
}


Tags
MVVM
Asked by
Stacey
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Stacey
Top achievements
Rank 1
Share this question
or