mvvm - Kendo UI MVVM 中的数据绑定(bind)对象

Question

也许我误解了 Kendo 的 MVVM 实现的概念，但是...我有一个简单的 Kendo UI Mobile view，它是数据绑定(bind)到 View 模型的:

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

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

myStaticDataSource 是“实体”的静态数组，作为简单的 JavaScript 对象，具有诸如 name 或 description 之类的字段。

View 及其输入字段绑定(bind)到 View 模型:

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

当用户更改输入字段时，数据绑定(bind) View 模型实体 myEntity 中的相应字段(例如 name)会更新。但是:我所期望的是 myStaticDataSource 中的实体也会更新，因为我没有克隆对象。但事实并非如此!它的值保持在原来的值上。为什么是这样？我是否遗漏了有关 Kendo 的 MVVM 处理的某些信息？

Answer 1

这是 Kendo Observable 对象和数组的副作用。当您使用 .set() 方法将属性分配给 ObservableObject 时，它也希望使分配的项目成为可观察对象。 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

此问题的“修复”是执行以下任一操作:

---

将 myStaticDataSource 设为 Kendo DataSource，这将使您放入其中的所有项目成为 ObservableObject。

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

---

使 myStaticDataSource 成为 Kendo ObservableArray，这将使您放入其中的所有项目成为 ObservableObject

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

---

使 myStaticDataSource 数组中的每个项目成为一个 ObservableObject

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