Kendo MVVM框架关键的一个部分为ViewModel,它主要是通过kendo.data.ObserableObject来提供支持的。它可以监控改变(UI变化或是值的变化)并通知关心该变化的组件。 本篇以下ViewModel 和 ObservableObject 代表同一对象。
为了创建一个ObservableObject 对象,可以通过创建一个新kendo.data.ObservableObject 实例或是使用kendo.observable方法,这两种方法效果相同。
例如:
var viewModel1 = new kendo.data.ObservableObject( { field1: "value1", field2: "value2" }); var viewModel2 = kendo.observable( { field1: "value1", field2: "value2" });
kendo.bind 方法内部实现时自动将给定的ViewModel对象转换为一个ObservableObject 对象,除非传入的参数类型已经是一个ObservableObject 对象。
注:如果某个ViewModel对象在初始后以后还会使用到(在调用kendo.bind之前或之后),则必须使用kendo.observable方法或是new kendo.data.ObservableObject来创建一个ViewModel对象。比如:
var viewModel = kendo.observable({ name: "John Doe" }); viewModel.set("name", "Jane Doe"); // use the View-Model object after initialization
如果ViewModel对象在初始化后不再访问这个对象,那么你可以使用普通的JavaScript对象,此时kendo.bind方法不会把原始的ViewMode对象转化为kendo.data.ObservableObject. 例如,下面的代码出错:
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");
因此强烈建议总是使用 kendo.observable 来初始化一个ViewModel对象。
使用get方法来读取ObservableObject对象的属性。例如:
var viewModel = kendo.observable({ name: "John Doe" }); var name = viewModel.get("name"); alert(name); // shows "John Doe"
get也支持读取嵌套的属性,例如:
var viewModel = kendo.observable({ person: { name: "John Doe" } }); var personName = viewModel.get("person.name"); alert(personName); // shows "John Doe"
使用set方法来设置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"
同样,set也支持设置嵌套的属性,例如:
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"
在应用中常常需要把某个ViewModel的属性重新格式成适合View显示的形式,在这种情况可以通过创建一个新的关联属性来实现,比如:
<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>
在这个例子中fullName为一关联属性,它依赖于firstName和lastName, 使用set修改firstName或是LastName后,FullName的值也随之变化。
要注意的是fullName的实现,对firstName,和lastName的访问,是通过get方法来实现的,如果使用下面的方法:
var viewModel = kendo.observable({ firstName: "John", lastName: "Doe", fullName: function() { return this.firstName + " " + this.lastName; } });
上面代码直接使用this.firstName来访问ObserableObject的属性,在这种情况下,fullName不会跟踪firstName和lastName的变化,此时改变firstName和lastName,fullName的值不变,因此建议总是使用get来访问某个属性。