Kendo UI MVVM中的数据绑定对象

Question

Kendo UI MVVM中的数据绑定对象

3

也许我对Kendo的MVVM实现理解有误，但是...我有一个简单的Kendo UI Mobile view视图，它与一个视图模型进行了数据绑定：

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

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

myStaticDataSource 是一个静态数组，其中包含一些简单的 JavaScript 对象，这些对象被称为 "entities"，它们具有像 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>

当用户更改输入字段时，数据绑定的视图模型实体 myEntity 中相应的字段（例如 name ）将被更新。但是：我所期望的是，由于我没有克隆对象，因此 myStaticDataSource 中的实体也会得到更新。但它没有！它的值仍然是原始值。为什么？Kendo的MVVM处理是否有什么我忽略的内容？

- Matthias

你正在通过使用 var bindingEntity = myStaticDataSource [0] 将元素分配给变量，然后将该变量绑定到视图来克隆它。它正按照您告诉它要做的方式执行。变量 bindingEntity（即 myEntity）正在更新，而不是 myStaticDataSource。 - Brett

1

@Brett，那不完全正确。var bindingEntity = myStaticDataSource[0]并没有克隆该项，对kendo的.set()的调用会作为副作用进行克隆。 - CodingWithSpike

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CodingWithSpike · Accepted Answer

这是使用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"})
];