Kendo MVVM 框架關(guān)鍵的一個(gè)部分為 ViewModel,它主要是通過(guò) kendo.data.ObserableObject 來(lái)提供支持的。它可以監(jiān)控改變( UI 變化或是值的變化)并通知關(guān)心該變化的組件。 本篇以下 ViewModel 和 ObservableObject 代表同一對(duì)象。
為了創(chuàng)建一個(gè) ObservableObject 對(duì)象,可以通過(guò)創(chuàng)建一個(gè)新 kendo.data.ObservableObject 實(shí)例或是使用 kendo.observable 方法,這兩種方法效果相同。
例如:
var viewModel1 = new kendo.data.ObservableObject( {
field1: "value1",
field2: "value2"
});
var viewModel2 = kendo.observable( {
field1: "value1",
field2: "value2"
});
kendo.bind 方法內(nèi)部實(shí)現(xiàn)時(shí)自動(dòng)將給定的 ViewModel 對(duì)象轉(zhuǎn)換為一個(gè) ObservableObject 對(duì)象,除非傳入的參數(shù)類型已經(jīng)是一個(gè) ObservableObject 對(duì)象。
注:如果某個(gè) ViewModel 對(duì)象在初始后以后還會(huì)使用到(在調(diào)用 kendo.bind 之前或之后),則必須使用 kendo.observable 方法或是 new kendo.data.ObservableObject 來(lái)創(chuàng)建一個(gè) ViewModel 對(duì)象。比如:
var viewModel = kendo.observable({
name: "John Doe"
});
viewModel.set("name", "Jane Doe"); // use the View-Model object after initialization
如果 ViewModel 對(duì)象在初始化后不再訪問(wèn)這個(gè)對(duì)象,那么你可以使用普通 的JavaScript 對(duì)象,此時(shí) kendo.bind 方法不會(huì)把原始的 ViewMode 對(duì)象轉(zhuǎn)化為 kendo.data.ObservableObject. 例如,下面的代碼出錯(cuò):
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");
因此強(qiáng)烈建議總是使用 kendo.observable 來(lái)初始化一個(gè) ViewModel 對(duì)象。
使用 get 方法來(lái)讀取 ObservableObject 對(duì)象的屬性。例如:
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 方法來(lái)設(shè)置 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 也支持設(shè)置嵌套的屬性,例如:
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"
創(chuàng)建關(guān)聯(lián)屬性(或者成為計(jì)算后屬性) 在應(yīng)用中常常需要把某個(gè) ViewModel 的屬性重新格式成適合 View 顯示的形式,在這種情況可以通過(guò)創(chuàng)建一個(gè)新的關(guān)聯(lián)屬性來(lái)實(shí)現(xiàn),比如:
<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>
在這個(gè)例子中 fullName 為一關(guān)聯(lián)屬性,它依賴于 firstName 和 lastName, 使用 set 修改 firstName 或是 LastNam e后,F(xiàn)ullName 的值也隨之變化。
要注意的是 fullName 的實(shí)現(xiàn),對(duì) firstName,和 lastName 的訪問(wèn),是通過(guò) get 方法來(lái)實(shí)現(xiàn)的,如果使用下面的方法:
var viewModel = kendo.observable({
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
});
上面代碼直接使用 this.firstName 來(lái)訪問(wèn) ObserableObject 的屬性,在這種情況下,fullName 不會(huì)跟蹤 firstName 和 lastName 的變化,此時(shí)改變 firstName 和 lastName,fullName 的值不變,因此建議總是使用 get 來(lái)訪問(wèn)某個(gè)屬性。
更多建議: