Data bound object in Kendo MVVM UI
I may be misunderstanding the Kendo MVVM implementation concept, but ... I have a simple Kendo UI Mobile interface view
, data bound for a view model:
var myViewModel = kendo.observable({
myEntity: null,
onViewShow: function (e) {
var bindingEntity = myStaticDataSource[0];
myViewModel.set("myEntity", bindingEntity);
}
});
myStaticDataSource
is a static array of "entities" as simple JavaScript objects with fields such as name
or description
.
The view and its input fields are bound to the view model:
<div data-role="view" data-layout="default" data-model="myViewModel" data-bind="events: { show: onViewShow }">
<form>
<ul data-role="listview" data-style="inset">
<li>
<label>
Name
<input type="text" data-bind="value: myEntity.name" />
</label>
</li>
</ul>
</form>
</div>
When a user changes an input field, the corresponding field (for example name
) is updated in the data-bound data view model object myEntity
. But: I would expect the object to myStaticDataSource
be updated as well, since I am not cloning objects. But this is not the case! Its value remains at its original value. Why is this? Am I missing something about Kendo MVVM handling?
source to share
This is a side effect of Kendo Observable objects and arrays. When you assign a property to a method ObservableObject
using a method .set()
, it wants that assigned item to be observed as well. Your elements in myStaticDataSource
are probably plain JS objects, not Kendo Observables, so Kendo wraps the object in a new one ObservableObject
for you. This means that the objects are no longer the same.
It might make sense:
var items = [{name: "item one"}];
var vm = kendo.observable({item: undefined});
vm.set("item", items[0]);
vm.item === items[0]; // returns FALSE
items[0] instanceof kendo.data.ObservableObject // returns FALSE
vm.item instanceof kendo.data.ObservableObject // returns TRUE
var items = kendo.observable([{name: "item one"}]);
var vm = kendo.observable({item: undefined});
vm.set("item", items[0]);
vm.item === items[0]; // returns TRUE
items[0] instanceof kendo.data.ObservableObject // returns TRUE
vm.item instanceof kendo.data.ObservableObject // returns TRUE
To "commit" to this is to do any of the following:
Make a myStaticDataSource
kendo DataSource
that will do all the items you put in it ObservableObject
.
var myStaticDataSource = new kendo.data.DataSource({
data: [
{name: "Bob"}
]
};
Make a myStaticDataSource
kendo ObservableArray
that will make all the items you put in itObservableObject
var myStaticDataSource = kendo.observable([
{name: "Bob"}
]);
Make each element in array myStaticDataSource
aObservableObject
var myStaticDataSource = [
kendo.observable({name: "Bob"})
];
source to share