概述

Kendo MVVM 框架關(guān)鍵的一個部分為 ViewModel，它主要是通過 kendo.data.ObserableObject 來提供支持的。它可以監(jiān)控改變（ UI 變化或是值的變化）并通知關(guān)心該變化的組件。 本篇以下 ViewModel 和 ObservableObject 代表同一對象。

為了創(chuàng)建一個 ObservableObject 對象，可以通過創(chuàng)建一個新 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 方法內(nèi)部實現(xiàn)時自動將給定的 ViewModel 對象轉(zhuǎn)換為一個 ObservableObject 對象，除非傳入的參數(shù)類型已經(jīng)是一個 ObservableObject 對象。

注：如果某個 ViewModel 對象在初始后以后還會使用到（在調(diào)用 kendo.bind 之前或之后），則必須使用 kendo.observable 方法或是 new kendo.data.ObservableObject 來創(chuàng)建一個 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 對象轉(zhuǎn)化為 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 對象。

讀取 ObservableObject

使用 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"

設(shè)置 ObservableObject 屬性

使用 set 方法來設(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)屬性（或者成為計算后屬性） 在應(yīng)用中常常需要把某個 ViewModel 的屬性重新格式成適合 View 顯示的形式，在這種情況可以通過創(chuàng)建一個新的關(guān)聯(lián)屬性來實現(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>

在這個例子中 fullName 為一關(guān)聯(lián)屬性，它依賴于 firstName 和 lastName， 使用 set 修改 firstName 或是 LastNam e后，F(xiàn)ullName 的值也隨之變化。

要注意的是 fullName 的實現(xiàn)，對 firstName,和 lastName 的訪問，是通過 get 方法來實現(xiàn)的，如果使用下面的方法：

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 來訪問某個屬性。