前言
最近一段時間在網上經常看到關於Knockout.js文章，於是自己就到官網看了下，不過是英文的，自己果斷搞不來，借用google翻譯了一下。然后剛剛發現在建立asp.net mvc4.0的應用程序的時候，建完之后我直接在項目的Scripts中看到了
這兩個js類庫，用谷歌翻譯看了下官網，Ko的實現原理是MVVM，比MVC高級一些。
簡介MVVM模式
MVVM是Model-View-ViewModel的簡寫。
WPF的數據綁定與Presentation Model相結合是非常好的做法,使得開發人員可以將View和邏輯分離出來,但這種數據綁定技術非常簡單實用，也是WPF所特有的，所以我們又稱之為 Model-View-ViewModel(MVVM)。這種模式跟經典的MVP（Model-View-Presenter）模式很相似，除了你需要一 個為View量身定制的model，這個model就是ViewModel。ViewModel包含所有由UI特定的接口和屬性，並由一個 ViewModel 的視圖的綁定屬性，並可獲得二者之間的松散耦合，所以需要在ViewModel 直接更新視圖中編寫相應代碼。數據綁定系統還支持提供了標准化的方式傳輸到視圖的驗證錯誤的輸入的驗證。
在視圖（View）部分，通常也就是 一個Aspx頁面。在以前設計模式中由於沒有清晰的職責划分，UI 層經常成為邏輯層的全能代理，而后者實際上屬於應用程序的其他層。MVP 里的M 其實和MVC里的M是一個，都是封裝了核心數據、邏輯和功能的計算關系的模型，而V是視圖（窗體），P就是封裝了窗體中的所有操作、響應用戶的輸入輸出、 事件等，與MVC里的C差不多，區別是MVC是系統級架構的，而MVP是用在某個特定頁面上的，也就是說MVP的靈活性要遠遠大於MVC，實現起來也極為 簡單。
我們再從IView這個interface層來解析，它可以幫助我們把各類UI與邏輯層解耦，同時可以從UI層進入自動化測試 （Unit/Automatic Test）並提供了入口，在以前可以由WinForm/Web Form/MFC等編寫的UI是通過事件Windows消息與IView層溝通的。WPF與IView層的溝通，最佳的手段是使用Binding，當然， 也可以使用事件；Presenter層要實現IView，多態機制可以保證運行時UI層顯示恰當的數據。比如Binding，在程序中，你可能看到 Binding的Source是某個interface類型的變量，實際上，這個interface變量引用着的對象才是真正的數據源。
MVC模式大家都已經非常熟悉了，在這里我就不贅述，這些模式也是依次進化而形成MVC—>MVP—>MVVM。有一句話說的好：當物體受到 接力的時候，凡是有界面的地方就是最容易被撕下來的地方。因此，IView作為公共視圖接口約束（契約）的一層意思；View則能傳達解耦的一層意思。
MVVM的優點
MVVM已在微軟WPF/Silverlight/WP7中廣泛應用，和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優點
1. 低耦合。視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
2. 可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
3. 獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計，使用Expression Blend可以很容易設計界面並生成xaml代碼。
4. 可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
簡單的說，在MVVM里，UI操作涉及的數據被包裝成ViewModel，接着在UI輸入/顯示元素分別標注其對應到ViewModel某個屬 性值。當程式碼改變ViewModel屬性值，其對應的輸入/顯示欄位元素便會自動更新；而在UI欄位填入不同內容，ViewModel的資料屬性也會立 刻被修改為新值。這種雙向綁定(Two-Way Binding)的概念，若使用傳統做法得在ViewModel的屬性修改事件將新值反映到某個顯示/輸入元素上，還得攔截輸入元素的onChange事 件，用程式將最新輸入結果反應到ViewMode屬性上，瑣碎的實做細節蠻多的。而不管是Silverlight/WPF或 JavaScript，MVVM程式庫的目標即在節省前述自行開發的工夫，只需在顯示/輸入元素上注明其對應的ViewModel屬性，之后全部交給 knockout.js庫自動處理，讓程式開發者能優雅地實現MVVM。
Knockoutjs的優點
1.聲明式綁定 (Declarative Bindings)：使用簡明易讀的語法很容易地將模型(model)數據關聯到DOM元素上。
2.UI界面自動刷新 (Automatic UI Refresh)：當您的模型狀態(model state)改變時，您的UI界面將自動更新。
3.依賴跟蹤 (Dependency Tracking)：為轉變和聯合數據，在你的模型數據之間隱式建立關系。
4.模板 (Templating)：為您的模型數據快速編寫復雜的可嵌套的UI。
5.免費，開源純JavaScript的 - 可跟jQuery的或其他JavaScript框架兼容，縮小的版本只有40KB，HTTP壓縮后只有14KB跨瀏覽器！支持IE6+, FF2, Chrome, Opera, Safari
官方網站提供了友好的互動式的在線入門教程，可以去http://learn.knockoutjs.com/練習以及查看詳細的API文檔。
開始使用Knockout.js
如果你建立像asp.net mvc 4.0這樣的Web應用程序，那么你可以不用任何操作即可以使用Knockout.js,如果你建立其他的項目或許需要引用該類庫。通過Nuget程序包
點擊安裝即可在項目的Scripts或者其他相應的文件夾中找到Ko相關的類庫文件。
簡單調用
@{
ViewBag.Title = "First"; } <h2>@ViewBag.Message</h2> <table> <tr> <td>輸入值：</td> <td><input type="text" id="txtValue" data-bind="value: myValue" /></td> </tr> <tr> <td>響應文本：</td> <td><span id="spnValue" data-bind="text: myValue"></span></td> </tr> </table> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var myViewModel = { myValue: ko.observable("aehyok") }; ko.applyBindings(myViewModel); </script>
然后我現在建立的是asp.net mvc4.0應用，然后運行后，輸入文本數據，移開鼠標，即可看到span中的文本也跟隨發生變化。
1.我們首先需要引用類庫src="~/Scripts/knockout-2.3.0.debug.js"
2.定義myViewModel組件對象，並包含一個myValue的屬性。
3.通過data-bind="value:myValue"將myValue屬性綁定到<input>的value值。
4.通過data-bind="text:myValue"將屬性值動態的反映到<span>上。
由於本例未引用jQuery，無$.ready()可用，所以把<script>放在網頁的最后以確保在網頁元素都載入后才執行ko.applyBindings( )。
試着改變<input>的值，可發現<span>會馬上反應修改后的結果，可以看出已經自動的檢測了onchange時間了，果然很強悍！