前言：出于某種原因，需要學習下Knockout.js，這個元件很早前聽說過，但一直沒嘗試使用，這兩天學習了下，覺得它真心不錯，雙向綁定的機制簡直太爽了。今天打算結合bootstrapTable和Knockout去實作一個簡單的增删改查，來體驗一把神奇的MVVM。關于WebApi的剩餘部分，部落客一定抽時間補上。
如今，各種前端架構應接不暇，令人眼花缭亂，有時不得不感歎作為程式猿也真是苦逼，總有學不完的技術，何時是盡頭，除非你轉化！苦海無邊，回頭是不是岸，由你決定！
Knockout.js是一個基于MVVM模式的輕量級的前端架構，有多輕？根據官網上面顯示的最新版本v3.4.0，僅22kb。能夠友好地處理資料模型和界面DOM的綁定，最重要的是，它的綁定是雙向的，也就是說資料模型變化了，界面DOM上的資料也會跟着發生變化，反過來，界面DOM上的資料變化了，資料模型也會相應這個變化。這樣能夠大大減少我們的前端代碼量，并且使得我們界面易于維護，再也不用寫一大堆事件監控資料模型和界面DOM的變化了。下面部落客會根據一個使用執行個體來說明這兩點。
Knockout.js官網：http://knockoutjs.com
Knockout.js開源位址：https://github.com/knockout/knockout
MVVM模式：這是一種建立使用者界面的設計模式，MVVM把它拆分成三塊就是Model、View、ViewModel，Model就是資料模型，View就是我們的視圖，ViewModel就是一個視圖模型，用來綁定資料模型和視圖上面的dom元素。如果你使用過WPF和Silverlight，了解這個應該不是啥問題；沒有使用過也什麼關系，看完此文，你會有一個大緻的認識。
一般來說，如果你從零開始使用Knockout.js，你至少需要做以下四部
注意：knockout.js并不需要jquery的支援，如果你的項目需要用到jquery的相關操作，則引用jquery；否則隻引用以上檔案即可。
viewmodel是什麼？其實，在js裡面，它看上去就像一個json對象。我們定義一個viewmodel：
注意：對應input标簽的文本，需要使用textinput，而普通标簽的文本使用text即可。
做了以上三步，還需要激活knockout的綁定
做到這四部，基本實作了一個最簡單的viewmodel的資料綁定。得到效果：
如果你夠細心，會發現ko.applyBindings()方法有兩個參數，第一個就是我們需要綁定的viewmodel，第二個又是什麼呢？由 ko.applyBindings(myViewModel); 可知，第二個參數是一個可選參數，它表示viewmodel綁定的标簽的作用域，比如，我們将以上代碼改一下：
得到結果：
由此可知：第二個參數限定了myViewModel的作用範圍，也就是說，隻有在id="lb_name"的标簽上面綁定才會生效，如果第二個參數是div等容器标簽，它表示該綁定的範圍為該div下面的所有子标簽。
截止到上面的四步，我們看不到任何效果，看到的無非就是将一個json對象的的資料綁定到了html标簽上面，這樣做有什麼意義呢？不是把簡單的問題複雜化嗎？别急，馬上見證奇迹！上文說了，knockout最重要的意義在于雙向綁定，那麼如何實作我們的雙向綁定呢？答案就是監控屬性。
在knockout裡面，核心的有三個監控屬性：Observables,DependentObservables,ObservableArray，Observe的意思翻譯過來是觀察、觀測的意思，如果說成觀察屬性或者觀測屬性感覺不太恰當，我們暫且叫監控屬性。
我們将上面的例子改成這樣：
ko.observable("Lilei") 這一句的意義是将viewmodel的Name屬性添加成為監控屬性，一定Name屬性變成監控屬性，神奇的事情就發生了，我們來看看當我們寫myViewModel.的時候：
Name由原來的屬性變成方法了，也就是說一旦添加了ko.observable()，那麼對應的屬性就會變成方法，那麼對于Name的取值和指派都需要使用myViewModel.Name()來處理。我們先來看看效果：
代碼釋疑：很顯然 myViewModel.Name($(this).val()); 這一句将目前文本框的值賦給了Name屬性，由于界面綁定了Name屬性，是以label裡面的值也随之發生了變化。或者你會說，這個使用textchange事件也可以做到的，隻要将目前文本框的值賦給label标簽，也可以達到這個效果，這個不算什麼。确實，你的寫法也可以達到目的，但是我們的監控屬性的意義在于，任何地方改變了Name的值，界面都會随之變化，而不用每個地方去給label标簽指派，JS裡面隻需要把關注點方法myViewModel.Name()上面即可。是不是很厲害~~
如果看了上面的監控屬性還沒過瘾？下面再來看看監控依賴屬性的使用。
我們将代碼再改下看看：
先來看看效果：
代碼釋疑：通過添加監控依賴屬性 ko.dependentObservable() 将Des屬性的值能同時監控到Name和Profession兩個的變化，其中任何一個發生變化，Des綁定的标簽都會觸發改變，這樣做的最大好處就是避免了我們js去操作dom的麻煩，有點意思吧。
除了上面兩種，ko還支援對數組對象的監控。我們來看一個例子：
看看效果：
代碼釋疑：以上通過ko.observableArray()這個方法添加了對數組對象的監控，也就是說，js裡面任何地方隻要對deptArr數組對象做了數組的改變，都會觸發UI給出相應。需要注意的一點是，監控數組實際上是監控的數組對象本身，對于數組對象裡面的子對象屬性發生變化，是無法監控到的。比如我們将點選事件改成這樣：
效果：
由此說明數組監控實際上監控的是數組對象本身，對于數組裡面元素的屬性變化不會監控。如果确實需要對資料裡面對象的屬性變化進行監控，需要再對資料裡面對象屬性使用ko.observable()，兩者聯合使用。有興趣的可以試試。
上文中，我們使用了多個data-bind屬性，那麼在knockout裡面，到底有多少個這種data-bind的屬性呢。這裡我們列出一些常用的屬性。
text，顧名思義就是文本的意思，這個綁定屬性一般用于<label>、<span>、<div>等标簽顯示文本，當然，如果你願意，任何标簽都可以使用這個綁定。它是使用基本上沒什麼好說的。如果沒有使用ko.observable()，則是靜态綁定，否則是動态綁定。
inputText，input标簽的文本，相當于input标簽的value屬性。
這個綁定屬性一般用于input标簽，和上面的inputText基本相似。隻不過value更加規範。
和value一起使用的還有一個參數valueUpdate，它表示界面做一個什麼操作的時候更新該value。valueUpdate主要取值有change/keyup/keypress/afterkeydown等。分别表示文本變化、鍵盤縮起、鍵盤按下、鍵盤按下之後等操作時候更新value對應的viewmodel的值。
上述代碼表示鍵盤收起的時候更新文本框的value屬性和myViewModel的Name屬性。
checked綁定一般用于checkbox、radio等可以選中的表單元素，它對應的值是bool類型。和value的用法基本相似，就不做重複說明。
enable綁定一般用于是否啟用标簽元素，一般用于表單元素的啟用和禁用。和disabled相反，對應的值也是bool類型。
由于IsMen屬性變成了false，所有對應的文本框會顯示禁用狀态。
和enable相反，用法和enable類似。
上文中在使用select的綁定時候使用過options，它表示select标簽的option的集合，對應的值為一個數組，表示這個下拉框的資料源。可以使用observableArray啟用對這個資料源的監控。用法見上面。
text綁定實際上是對标簽innerText的設定和取值，那麼同理，html綁定也是對innerHTML的設定和取值。它對應的值為一段html标簽。
css綁定是添加或删除一個或多個樣式（class）到DOM元素上。使用格式：
該div會顯示背景色。
如果需要增加或移除多個樣式，隻要稍微改下即可，比如：
如果css綁定的作用是向标簽動态添加或移除class樣式，那麼style綁定的作用就是想标簽動态添加或移除某一個樣式。比如：
如果是添加或者移除多個，同css綁定的用法
attr綁定主要用于向标簽添加移除某一個或多個屬性（包括自定義屬性），永和和css類似。
click綁定表示在對應的DOM元素上面添加點選事件的執行方法。可以在任意元素上面使用。
event.currentTarget表示目前點選的DOM元素。有時為了簡便，我們直接使用匿名函數的方式綁定，比如：
但是這種将js揉到html裡面的寫法讓部落客難以接受，并且覺得維護起來相對不友善，尤其是點選事件裡面的邏輯略複雜時。是以，如非必須，不建議直接寫這種匿名函數的方式。
關于data-bind的所有綁定，可以看官網上面的介紹，這裡就不一一列舉了。需要用的時候去官網上查下就好了。看看官網上面列舉的所有綁定：
我們知道，為了避免不同語言直接的展現方式，一般情況下我們前端和後端互動的時候統一使用Json格式的資料，我們通過http請求從後端取到的資料模型，而要使用我們的ko的一些特性，必須要将這些普通的資料模型轉換成ko的監控屬性；反過來，我們使用ko的監控屬性，有時又需要把這些屬性轉換為普通的json資料傳到背景，那麼如何實作這個轉換呢？
比如我們從背景取到一個Json對象，然後把它變成到我們的viewmodel，然後綁定到我們的界面DOM。
我們發送一個請求到後端，取到一個json對象，指派到oJson，然後我們把oJson轉換成viewmodel，最直覺的方式就是手動轉換了。比如我們可以這樣：
然後在ajax請求的success裡面
這樣，通過手動綁定，實作了json對象到viewmodel的綁定。這樣做的好處就是靈活，壞處顯而易見，手工代碼量太大。
還好，有我們萬能的開源，總有人想到更好的辦法，我們使用knockout.Mapping元件就能很好地幫助我們界面json對象到viewmodel的轉換。
knockout.Mapping開源位址：下載下傳
下面來簡單看看它如何使用，還是上面的例子，我們不用實作定義任何viewmodel，首先需要引用knockout.mapping.js
注意：這裡knock.mapping-lastest.js必須要放在knockout-3.4.0.min.js的後面，否則調用不到ko.mapping。
然後直接在success函數裡面這樣使用
我們來看效果：
代碼釋疑：通過ajax請求從背景取到的json對象，通過ko.mapping.fromJS()，很友善地将其轉換成了viewmodel，是不是猴犀利！當然除了這種用法，還可以更新已經存在viewmodel，使用如下：
在success裡面，根據data的值去更新myViewModelJson這個viewmodel。
上面說了JSON對象轉化為viewmodel，那麼反過來，如果我們需要将viewmodel轉換為Json對象傳遞到後端，怎麼辦呢？
knockout裡面提供了兩個方法：
ko.toJS()：将viewmodel轉換為JSON對象
ko.toJSON()：将viewmodel轉換為序列化過的Json string。
比如我們的代碼如下：
那麼我們來監控下oJson1和oJson2的值：
代碼釋疑：通過上面這張圖，很容易了解兩個方法的差別，這裡需要說明一點的是，這兩個方法是ko自帶的，并不需要mapping元件的支援。
上面講了那麼多，都是介紹knockout裡面的一些綁定和監控，那麼，有些時候，我們需要自定義我們的data-bind，型如： <label data-bind="myBind:Name"></label> ，這種需求再做元件封裝的時候尤其有用，是否可以實作呢？當然可以。
在knockout裡面，提供了ko.bindingHandlers屬性，用于自定義data-bind屬性，它的文法如下：
就這樣申明一下，然後在我們的html标簽裡面就可以使用自定義data-bind了。
MySelect就是我們自定義的綁定屬性，$root暫且可以了解為初始化（雖然這樣解釋并不嚴謹，如果有更加合理的解釋歡迎指正）。
代碼釋疑：通過上面的ko.bindingHandlers就能簡單實作自定綁定屬性，需要說明兩點：
init，顧名思義初始化自定義綁定，它裡面包含多個參數，一般使用較多的是前兩個參數，第一個參數表示初始化自定義綁定的DOM元素，第二個參數一般用來傳遞初始化的參數。
update，更新回調，當對應的監控屬性變化時，會進入到這個方法。如果不需要回調，此方法可以不聲明。
在此部落客就結合原來分享過的一個下拉框元件MutiSelect來簡單說明下自定義綁定的使用。
一般情況下，如果我們需要使用ko去封裝一些通用元件，就需要用到我們的ko.bindingHandlers，下面部落客就結合MutiSelect元件來說說如何使用。
首先聲明自定義的ko.bindingHandlers，在init方法裡面初始化我們的select标簽
然後在頁面标簽裡面使用
最後第三部，激活綁定
如果不需要傳遞參數，這裡隻需要綁定一個空的viewmodel即可。有人疑惑了，第三部感覺沒啥實際意義呢。部落客的了解是，DOM元素需要使用data-bind去綁定資料，必須要啟用ko的綁定，也就是這裡的ko.applyBindings()。
得到效果：
第一步還是自定義ko.bindingHandlers
第二步和上面相同，在html标簽裡面使用這個自定義綁定。
第三步，在激活綁定的時候傳入參數
通過這三步即可将參數傳到我們的MutiSelect的初始化裡面：
代碼釋疑：init事件的第二個參數，我們說了，它主要作用是擷取我們viewmodel裡面傳過來的參數，隻不過這裡要把它當做方法使用，為什麼會這麼用，還有待研究！
至此基礎的東西終于是鋪墊完了，本來打算一篇搞定的，可以沒料到基礎的東西展開來這麼多篇幅！增删改查的示例放到下篇吧。歡迎學習交流，當然也歡迎推薦！
PS：下篇已經完成，有需要的可以看看：JS元件系列——BootstrapTable+KnockoutJS實作增删改查解決方案（二）