KnockoutJs官網教程學習(一)

    這一教程中你將會體驗到一些用knockout.js和Model-View-ViewModel(MVVM)模式去創建一個Web UI的基礎方式。

    將學會如何用views(視圖)和declarative bindings(聲明的綁定信息)去定義一個UI的展現方式，它的數據和行為使用的ViewModels(視圖模型)和observables(觀測)，以及如何一切自動保持同步得益於Knockout的依賴跟蹤（甚至數據的任意級聯鏈）。

    本章目錄：

1） 在視圖中使用綁定

2） 使數據可進行編輯

3） 定義計算值

4） 添加更多規則

  1、在視圖中使用綁定。

例如有一個Person視圖模型，另外還需要有個視圖頁面用來展現Person的數據。

首先我們定義一個knockout的js視圖模型

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Bert";
    this.lastName = "Bertington";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

這里我們需要注意的是我們定義好了一個ViewModel對象后需要調用Knockout的applyBindings方法來綁定視圖信息，讓當前頁面知道我們可以在這個頁面上使用這個ViewModel對象來綁定控件值。

然后我們來編寫需要展現信息的頁面代碼

<p>First name: <strong data-bind="text:firstName">todo</strong></p>
<p>Last name: <strong data-bind="text:lastName">>todo</strong></p>

運行后我們會發現頁面上的First Name和Last Name 分別從原來的todo變成了我們js中定義的字段值了。因為data-bind屬性讓knockout聲明的ViewModel屬性與DOM元素關聯起來，我們僅僅使用text去給DOM元素指定文本內容即可。

2、使數據可進行編輯

實際的開發過程中我們並不僅限於將靜態的數據進行展示，更多時候我們需要對數據進行編輯。下面我們使用value綁定我們普通的input控件來對數據進行編輯。

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>
<p>First name: <input data-bind="value: firstName"/></p>
<p>Last name: <input data-bind="value: lastName"/></p>

經過上面的代碼，我們已經能夠在頁面上對數據進行編輯了，但是編輯后我們並沒有更新相應的字段值，實際上當我們編輯某一個文本框的時候就會更新相關ViewModel中的的字段值，由於ViewModel的屬性值僅僅是字符串，無法通知任何人它的值改變了，因此UI中的值還是靜態的。這就是為什么Knockout有一個observables的概念（當屬性值改變時會自動通知）。這樣我們就需要修改一下我們的ViewModel定義我們將ViewModel修改為一下來實現相關綁定字段的自動更新功能。

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

現在修改一下文本框中的數據，我們就可以很直觀的看到上面綁定了字段的值會隨着文本框內容的改變而改變了。

3、定義計算值

很多情況下，我們希望拼接或者轉換多個值提供給其他控件，下面我們將定義一個FullName字段值為FirstName+” ”+LastName。

Knockout有一個computed屬性的概念（observable類型（例如：改變時自動通知）並且他是基於其他observable字段值計算得出的）。

下面我們修改一下我們的ViewModel對象，增加一個FullName屬性。

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

正如你看到的，我們on個過一個回傳方法給computed指定了它的值應該如何進行計算，下面我們增加一個控件用來展現FullName字段。

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

現在運行后，編輯文本框你會發現頁面上所有控件的值都和相關的數據保持同步。原因是得益於Knockout的自動依賴跟蹤：最后一個控件的值依賴於FullName，而fullname依賴於firstName和lastName，無論是哪個通過文本框進行了修改。任何涉及到對象關聯部分的操作都會影響到ViewModel對象和可見UI的變化。結果如下：

4、添加更多規則

在本節的最后，我們添加一個規則：點擊一個button是將FullName修改為大寫。

首先我們在ViewModel中添加一個capitalizeFullName方法用來實現這個規則。

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.capitalizeLastName = function() {
        var currentVal = this.fullName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

這里需要注意的是調用一個observable類型值得時候可以把它作為一個方法來調用，下面我們在頁面上添加一個button通過click綁定來關聯我們剛剛添加的ViewModel信息。

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">轉換</button>

這樣我們在點擊轉換的時候就實現了將FullName轉換成大寫了。

---

第一次發布博客感覺好正式，雖然只是將官網的教程進行了一下“漢化”，希望大家拍磚指正。