Kendo UI MVVM中的数据绑定对象

也许我误解了Kendo的MVVM实现的概念，但是。。。我有一个简单的Kendo UI Mobile

视图

，它是绑定到视图模型的数据：

var myViewModel = kendo.observable({
    myEntity: null,

    onViewShow: function (e) {
        var bindingEntity = myStaticDataSource[0];
        myViewModel.set("myEntity", bindingEntity);
    }
});

<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>

myStaticDataSource

是一个静态的“实体”数组，作为简单的JavaScript对象，具有

name

或

description

等字段

视图及其输入字段绑定到视图模型：

var myViewModel = kendo.observable({
    myEntity: null,

    onViewShow: function (e) {
        var bindingEntity = myStaticDataSource[0];
        myViewModel.set("myEntity", bindingEntity);
    }
});

<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>

名称

---

当用户更改输入字段时，数据绑定视图模型实体

myEntity

中的相应字段（例如

name

）将更新。但是：我所期望的是，

myStaticDataSource

中的实体也会更新，因为我没有克隆对象。但事实并非如此！其价值保持在原始价值上。为什么会这样？我是否遗漏了剑道的MVVM处理？

这是剑道可观测对象和阵列的副作用。 当您使用

.set（）

方法将属性指定给

可观察对象时，它也希望使该指定项成为可观察项。
myStaticDataSource
中的项目可能是普通的JS对象，而不是剑道可观察对象，因此剑道会为您将该对象包装成一个新的
observateObject
。这意味着对象不再相同

这可能更有意义：

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

对此的“修复”是执行以下任一操作：


将
mystaticdasource
设置为剑道
DataSource
，这将使放入其中的所有项目成为
可观察对象

var myStaticDataSource = new kendo.data.DataSource({
    data: [
        {name: "Bob"}
    ]
};


使
mystaticdasource
成为剑道
observearray
，这将使您放入其中的所有项目成为
observeobject

var myStaticDataSource = kendo.observable([
    {name: "Bob"}
]);

var myStaticDataSource = [
    kendo.observable({name: "Bob"})
];


将
myStaticDataSource
数组中的每个项目设置为
observeObject

var myStaticDataSource = kendo.observable([
    {name: "Bob"}
]);

var myStaticDataSource = [
    kendo.observable({name: "Bob"})
];

通过使用
var bindingEntity=myStaticDataSource[0]
将元素分配给变量，然后将该变量绑定到视图，可以克隆该元素。它完全按照你说的做。变量
bindingEntity
（即
myEntity
）正在更新，而不是
mystaticdasource
@Brett，这不太正确
var bindingEntity=myStaticDataSource[0]
不会克隆该项目，调用kendo
.set（）
会产生副作用。谢谢！我不知道调用
.set（）
会产生克隆对象的副作用。现在清楚了！