Kendo UI MVVM中的数据绑定对象

Question

也许我误解了剑道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处理的东西吗？

Answer 1

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

对此的"修复"是执行以下任一操作:

制作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"})
];