也许我误解了剑道MVVM实现的概念,但是...我有一个简单的Kendo UI Mobile view
,它与视图模型绑定数据:
var myViewModel = kendo.observable({
myEntity: null,
onViewShow: function (e) {
var bindingEntity = myStaticDataSource[0];
myViewModel.set("myEntity", bindingEntity);
}
});
myStaticDataSource
是一个“实体”的静态数组,作为简单的JavaScript对象,包含name
或description
等字段。
视图及其输入字段绑定到视图模型:
<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>
当用户更改输入字段时,在数据绑定视图模型实体name
中更新相应字段(例如myEntity
)。但是:我所期望的是myStaticDataSource
中的实体也会更新,因为我不是克隆对象。但事实并非如此!其价值保持原始价值。为什么是这样?我错过了一些关于剑道MVVM处理的事情吗?
答案 0 :(得分:5)
这是Kendo Observable对象和数组的副作用。
使用ObservableObject
方法将属性分配给.set()
时,它也希望将该分配的项目设为可观察对象。 myStaticDataSource
中的项目可能是普通的JS对象,而不是Kendo Observables,因此Kendo会将对象包装到新的ObservableObject
中。这意味着对象不再相同。
这可能更有意义:
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
&#34;修复&#34;这是为了做以下任何一个:
使myStaticDataSource
成为一个剑道DataSource
,这会使你放入的所有物品成为ObservableObject
。
var myStaticDataSource = new kendo.data.DataSource({
data: [
{name: "Bob"}
]
};
让myStaticDataSource
成为一个剑道ObservableArray
,这会使你放入的所有物品成为ObservableObject
var myStaticDataSource = kendo.observable([
{name: "Bob"}
]);
将myStaticDataSource
数组中的每个项目设为ObservableObject
var myStaticDataSource = [
kendo.observable({name: "Bob"})
];