Knockout v3.4.0 中文版教程-1-入門和安裝

英文原版教程：http://knockoutjs.com/documentation/introduction.html
注：此教程根據英文原版翻譯，僅做練習，若有不足或錯誤，請指正

說明：
對原文中的一些單詞的翻譯是參考湯姆大叔的翻譯方式，以下：

observable 監控
observable array 監控數組
computed observable 計算監控
pure computed observable 純計算監控

1. 入門

1.Knockout怎樣工做的以及帶來了什麼好處

1. 簡介

Knockout是一款很優秀的JavaScript庫，它能夠幫助你經過一個簡潔的數據模型建立一個豐富的、響應式顯示和編輯的用戶界面。不管什麼時候你的UI界面的一部分有動態改變（好比，由用戶的操做引發的改變或者一個擴展數據源改變），KO 都能用更簡單的和可維護的方式實現它。
主要特性：

• 優雅的依賴追蹤 - 不管你的數據模型何時發生改變都能自動更新你的UI須要更新的部分。
• 聲明式綁定 - 一種簡單明瞭的方式讓你的數據模型和UI部分關聯，你可使用任意的嵌套的綁定上下文輕易地構建出一個複雜並且動態的UI界面。
• 良好的可擴展性 - 實現自定義行爲做爲新的聲明綁定，這樣經過短短几行代碼就能很容易實現代碼重用。

額外的好處：

• 純Javascript庫 - 兼容任何服務端和客戶端技術
• 能夠友好的添加到你已經有的web應用程序 - 不須要主程序框架改動
• 小巧的 - 經過gzip壓縮後只有13kb大小
• 兼容各類主流瀏覽器(IE 6+, Firefox 2+, Chrome, Safari, Edge, 其餘)
• 有一套完整的規範（採用BDD開發，BDD，行爲驅動開發）這意味着在新的瀏覽器和平臺上功能均可以正確容易地經過驗證。

開發者若是熟悉Ruby on Rails, ASP.NET MVC,或者其餘MV*技術框架可能會把MVVM看做一個使用聲明式語法的MVC實時form，換句話說，你能夠把KO當作是經過編輯JSON數據來構建UI界面的一種方式。。。不管你要作什麼：）

2. 如何使用它？

最快也是最有趣的入門方式是經過交互式教學指導。一旦你掌握了基礎，學習了在線示例，你就能夠在你的項目中使用KO了。

3. KO和jQuery(或者 Prototype等等)是存在競爭關係仍是能夠一塊兒工做？

全部人都喜歡 jQuery！它是咱們在過去不得不使用的難用且混亂的DOM API的一種優秀的替代方案。jQuery能夠經過優秀的底層API的方式操做網頁上的dom元素和處理事件。KO是用於解決其餘的一些問題。

只要你的UI界面變得複雜並且有重複性行爲，若是僅僅使用jQuery,項目會變得愈來愈複雜，並且維護代價很大。舉個例子，你顯示一個列表，並且想要當列表項僅僅在少於5項時會顯示一個添加按鈕。jQuery裏面沒有基礎數據模型的概念，因此爲了統計列表當前有多少項，你得計算一下table元素下tr元素的數量或者經過某些CSS類名來獲取DIV的數量。這些項也許是經過SPAN元素來顯示，你還得在用戶添加新項的時候更新列表的內容，你還得記得當列表項數量大於等於5的時候隱藏添加按鈕。以後，你被要求實現刪除功能，你得在當刪除按鈕被點擊的時候找出哪一個列表項發生了變化。

4. KO有什麼不一樣？

上述例子的情形對KO來講小菜一碟。它能讓你的項目在提升複雜性的時候不用懼怕致使項目不穩定。只是把上述的列表項做爲一個Javascript裏面的數組，而後使用foreach綁定把數組轉換爲table或者div集合，當數組發生改變的時候，對應的UI會一塊兒改變（你不須要考慮怎樣插入新的tr標籤或者要插在哪裏）。剩下的UI會保存同步。好比，你能夠聲明綁定一個SPAN標籤來顯示列表項的數量，以下所示：

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

就是這樣，你不用寫更新列表項的代碼，它會在myItems數組發生改變的時候自動更新，一樣，可使添加按鈕的顯示隱藏由列表項的數量控制，以下：

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

以後，當你被要求實現刪除功能的時候，你不須要考慮UI和數據模型是怎麼交互的細節，你只須要改變基礎數據模型便可。

總結：KO並無和jQuery或者其餘相似的優化操做底層的DOM API的庫存在競爭關係。KO提供了能夠和其餘庫互補的，經過高層次的方式對UI和數據模型進行關聯。KO自己也不依賴jQuery，可是在使用KO的同時使用jQuery，並且若是你想製做一些動畫特效，jQuery每每是必須的。

2.下載和安裝

下載就自行去官網下載便可，地址：http://knockoutjs.com/downloads/index.html

1. 經過Bower安裝

bower install knockout

2. 安裝

像jQuery那樣引入就行了