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 >