Knockout.Js官網學習（簡介）

前言

最近一段時間在網上常常看到關於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時間了，果真很強悍！