KendoUI>Framework>MVVM>ObservableObject

var viewModel1 = new kendo.data.ObservableObject( {

      field1: "value1",

      field2: "value2"

});



var viewModel2 = kendo.observable( {

      field1: "value1",

      field2: "value2"

});

      

这两段代码效果一致，kendo.data.ObservableObject和View-Model可以互换使用。因为所有View-Model继承于kendo.data.Observable对象。Objectkendo.data.ObservableObject对象支持更改追踪，以及更改通知。

kendo.bind方法来转换View-Model对象到ObservableObject 。

注意点： 用kendo.observale初始化View-Model后，你就可以用Kendo.data.ObservableObject的相关方法，因为这些方法能自动把View-Model对象转换为Kendo.data.ObservableObject

var viewModel = kendo.observable({
    name: "John Doe"
});

viewModel.set("name", "Jane Doe"); // use the View-Model object after initialization

如果，不是View-Model对象，自然不能：

var viewModel = {
   name: "John Doe"
};

kendo.bind(document.body, viewModel);

/* 
    The following statement  will fail because the View-Model
    is not an instance of kendo.data.ObservableObject.
*/
viewModel.set("name", "Jane Doe");

获取ObservableObject对象的值

var viewModel = kendo.observable({
     name: "John Doe"
});

var name = viewModel.get("name");
alert(name); // shows "John Doe"

var viewModel = kendo.observable({
     person: {
         name: "John Doe"
     }
});
var personName = viewModel.get("person.name");
alert(personName); // shows "John Doe"

设置ObservableObject对象的值

var viewModel = kendo.observable({
     name: "John Doe"
});

viewModel.set("name", "Jane Doe"); //set the "name" field to "Jane Doe"

var name = viewModel.get("name");
alert(name); // shows "Jane Doe"

var viewModel = kendo.observable({
     person: {
         name: "John Doe"
     }
});

viewModel.set("person.name", "Jane Doe");

var personName = viewModel.get("person.name");
alert(personName); // shows "Jane Doe"

组合View-Model对象的各个值

<span data-bind="text: fullName"></span>
<script>
    var viewModel = kendo.observable({
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
            return this.get("firstName") + " " + this.get("lastName");
        }
    });

    kendo.bind($("span"), viewModel);
</script>