Kendo UI MVVM 中的数据绑定对象

Posted 2023-05-07

【中文标题】Kendo UI MVVM 中的数据绑定对象

【英文标题】：Data bound object in Kendo UI MVVM

【发布时间】：2014-12-10 14:07:32

【问题描述】：

也许我误解了 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 对象的“实体”的静态数组，具有 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 处理的一些内容？

【问题讨论】：

您正在通过使用var bindingEntity = myStaticDataSource[0] 将元素分配给变量然后将该变量绑定到视图来克隆它。它完全按照你的吩咐去做。变量bindingEntity（即myEntity）正在更新，而不是myStaticDataSource。

@Brett 这不是真的。 var bindingEntity = myStaticDataSource[0] 不会克隆项目，调用 kendo .set() 会产生副作用。

【参考方案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 设为剑道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")
];

【讨论】：

谢谢！不知道.set()的调用有克隆对象的副作用。现在很清楚了！