Knockout應用開發指南 第一章：入門

1    Knockout簡介 (Introduction)

Knockout是一個輕量級的UI類庫，經過應用MVVM模式使JavaScript前端UI簡單化。

Knockout有以下4大重要概念：

• 聲明式綁定 (Declarative Bindings)：使用簡明易讀的語法很容易地將模型(model)數據關聯到DOM元素上。

• UI界面自動刷新 (Automatic UI Refresh)：當您的模型狀態(model state)改變時，您的UI界面將自動更新。

• 依賴跟蹤 (Dependency Tracking)：爲轉變和聯合數據，在你的模型數據之間隱式創建關係。

• 模板 (Templating)：爲您的模型數據快速編寫複雜的可嵌套的UI。

簡稱：KO

官方網站：http://knockoutjs.com

2    入門介紹 (Getting started)

2.1     KO工做原理及帶來的好處

Knockout是一個以數據模型（data model）爲基礎的可以幫助你建立富文本，響應顯示和編輯用戶界面的JavaScript類庫。任什麼時候候若是你的UI須要自動更新（好比：更新依賴於用戶的行爲或者外部數據源的改變），KO可以很簡單的幫你實現而且很容易維護。

重要特性:

• 優雅的依賴追蹤- 無論任什麼時候候你的數據模型更新，都會自動更新相應的內容。
• 聲明式綁定- 淺顯易懂的方式將你的用戶界面指定部分關聯到你的數據模型上。
• 靈活全面的模板- 使用嵌套模板能夠構建複雜的動態界面。
• 輕易可擴展- 幾行代碼就能夠實現自定義行爲做爲新的聲明式綁定。

額外的好處：

• 純JavaScript類庫 – 兼容任何服務器端和客戶端技術
• 可添加到Web程序最上部 – 不須要大的架構改變
• 簡潔的 – Gzip以前大約25kb
• 兼容任何主流瀏覽器 (IE 6+、Firefox 2+、Chrome、Safari、其它)
• Comprehensive suite of specifications （採用行爲驅動開發） - 意味着在新的瀏覽器和平臺上能夠很容易經過驗證。

開發人員若是用過Silverlight或者WPF可能會知道KO是MVVM模式的一個例子。若是熟悉 Ruby on Rails 或其它MVC技術可能會發現它是一個帶有聲明式語法的MVC實時form。換句話說，你能夠把KO當成經過編輯JSON數據來製做UI用戶界面的一種方式… 無論它爲你作什麼

 

OK, 如何使用它？

簡單來講：聲明你的數據做爲一個JavaScript 模型對象（model object），而後將DOM 元素或者模板（templates）綁定到它上面.

 

讓咱們來看一個例子

想一想在一個頁面上，航空旅客能夠爲他們的旅行升級高級食物套餐，當他們選擇一個套餐的時候，頁面當即顯示套餐的描述和價格。首先，聲明可用的套餐:

var availableMeals = [
    { mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
    { mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
    { mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
  ];

若是想讓這3個選項顯示到頁面上，咱們能夠綁定一個下拉菜單（例如：<select>元素）到這個數據上。例如：

<h3>Meal upgrades</h3>
<p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
Chosen meal: <select data-bind="options: availableMeals,
                                optionsText: 'mealName'"></select>

啓用Knockout並使你的綁定生效，在availableMeals變量聲明以後添加以下代碼：

var viewModel = {
    /* we'll populate this in a moment */
};

ko.applyBindings(viewModel); // Makes Knockout get to work
// 注意：ko. applyBindings須要在上述HTML以後應用纔有效

你能夠在這個系列裏將學習更多的view model 和 MVVM。如今你的頁面將render成以下的樣子：

 

 

響應選擇

下一步，聲明一個簡單的data model來描述旅客已經選擇的套餐，添加一個屬性到當前的view model上：

var viewModel = {
    chosenMeal: ko.observable(availableMeals[0])
};

ko.observable是什麼？它是KO裏的一個基礎概念。UI能夠監控（observe）它的值而且迴應它的變化。這裏咱們設置chosenMeal是UI能夠監控已經選擇的套餐，並初始化它，使用availableMeal裏的第一個值做爲它的默認值（例如：Standard）。

讓咱們將chosenMeal 關聯到下拉菜單上，僅僅是更新<select>的data-bind屬性，告訴它讓<select>元素的值讀取/寫入chosenMeal這個模型屬性：

Chosen meal: <select data-bind="options: availableMeals,
                                optionsText: 'mealName',
                                value: chosenMeal"></select>

理論上說，咱們如今能夠讀/寫chosenMeal 屬性了，可是咱們不知道它的做用。讓咱們來顯示已選擇套餐的描述和價格：

<p>
    You've chosen:
    <b data-bind="text: chosenMeal().description"></b>
    (price: <span data-bind='text: chosenMeal().extraCost'></span>)
</p>

因而，套餐信息和價格，將根據用戶選擇不一樣的套餐項而自動更新：

 

更多關於observables和dependency tracking的使用

最後一件事：若是能將價格格式化成帶有貨幣符號的就行了，聲明一個JavaScript函數就能夠實現了…

function formatPrice(price) {
    return price == 0 ? "Free" : "$" + price.toFixed(2);
}

… 而後更新綁定信息使用這個函數 …

(price: <span data-bind='text: formatPrice(chosenMeal().extraCost)'></span>)

… 界面顯示結果將變得好看多了：

 

Price的格式化展現了，你能夠在你的綁定裏寫任何JavaScript代碼，KO仍然能探測到你的綁定依賴代碼。這就展現了當你的model改變時，KO如何只進行局部更新而不用從新render整個頁面 – 僅僅是有依賴值改變的那部分。

 

鏈式的observables也是支持的（例如：總價依賴於價格和數量）。當鏈改變的時候，依賴的下游部分將會從新執行，同時全部相關的UI將自動更新。不須要在各個observables之間聲明關聯關係，KO框架會在運行時自動執行的。

你能夠從 observables 和 observable arrays 獲取更多信息。上面的例子很是簡單，沒有覆蓋不少KO的功能。你能夠獲取更多的內嵌的綁定和模板綁定。

 

KO和jQuery (或Prototype等)是競爭關係仍是能一塊兒使用？

全部人都喜歡jQuery! 它是一個在頁面裏操做元素和事件的框架，很是出色而且易使用，在DOM操做上確定使用jQuery，KO解決不一樣的問題。

若是頁面要求複雜，僅僅使用jQuery須要花費更多的代碼。 例如：一個表格裏顯示一個列表，而後統計列表的數量，Add按鈕在數據行TR小於5調的時候啓用，不然就禁用。jQuery 沒有基本的數據模型的概念，因此須要獲取數據的數量（從table/div或者專門定義的CSS class），若是須要在某些SPAN裏顯示數據的數量，當添加新數據的時候，你還要記得更新這個SPAN的text。固然，你還要判斷當總數>=5條的時候禁用Add按鈕。 而後，若是還要實現Delete功能的時候，你不得不指出哪個DOM元素被點擊之後須要改變。

 

Knockout的實現有何不一樣？

使用KO很是簡單。將你的數據描繪成一個JavaScript數組對象myItems，而後使用模板（template）轉化這個數組到表格裏（或者一組DIV）。無論何時數組改變， UI界面也會響應改變（不用指出如何插入新行<tr>或在哪裏插入），剩餘的工做就是同步了。例如：你能夠聲明綁定以下一個SPAN顯示數據數量（能夠放在頁面的任何地方，不必定非要在template裏）：

There are <span data-bind="text: myItems().count"></span> items

就是這些！你不須要寫代碼去更新它，它的更新依賴於數組myItems的改變。一樣， Add按鈕的啓用和禁用依賴於數組myItems的長度，以下：

<button data-bind="enable: myItems().count < 5">Add</button>

以後，若是你要實現Delete功能，沒必要指出如何操做UI元素，只須要修改數據模型就能夠了。

 

總結：KO沒有和jQuery或相似的DOM 操做API對抗競爭。KO提供了一個關聯數據模型和用戶界面的高級功能。KO自己不依賴jQuery，可是你能夠一塊兒同時使用jQuery， 生動平緩的UI改變須要真正使用jQuery。

 

2.2      下載安裝

Knockout的核心類庫是純JavaScript代碼，不依賴任何第三方的類庫。因此按照以下步驟便可添加KO到你的項目裏：

1. 下載Knockout類庫的最新版本，在正式開發和產品使用中，請使用默認的壓縮版本（knockout-x.x.js）。
   下載地址：https://github.com/SteveSanderson/knockout/downloads

Debug調試目的，可以使用非壓縮版本(knockout-x.x.debug.js). 和壓縮版本一樣的功能，可是具備全變量名和註釋的可讀性源代碼，而且沒有隱藏內部的API。

1. 在你的HTML頁面裏使用<script>標籤引用Knockout類庫文件。

這就是你須要的一切…

 

開啓模板綁定

…除非你想使用模板綁定功能（您頗有可能使用它，由於很是有用），那你須要再引用兩個JavaScript文件。 KO1.3版的默認模板引擎是依賴jQuery 的jquery.tmpl.js（最新版2.0版已經不依賴jquery tmp了）。因此你須要下載下面的2個文件並在引用KO以前引用：

• jQuery 1.4.2 或更高版本
• jquery-tmpl.js — 此版本 能夠很容易使用，或者你訪問官方網站 查找最新版本。

正確的引用順序：

<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='jquery-tmpl.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>

（固然，您要根據你的文件路徑累更新上面的文件路徑和文件名。）

下一步，開始學習 監控屬性。