<b>閱讀目錄</b>
<a href="http://www.cnblogs.com/landeanfen/p/5407221.html#_label0">一、效果預覽</a>
<a href="http://www.cnblogs.com/landeanfen/p/5407221.html#_label1">二、代碼示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5407221.html#_label1_0">1、表格初始化</a>
<a href="http://www.cnblogs.com/landeanfen/p/5407221.html#_label1_1">2、按鈕操作</a>
<a href="http://www.cnblogs.com/landeanfen/p/5407221.html#_label2">三、總結</a>
<b>正文</b>
其實也沒啥效果，就是簡單的增删改查，重點還是在代碼上面，使用ko能夠大量節省界面DOM資料綁定的操作。下面是整個整個增删改查邏輯的js代碼：
頁面效果：
好了，進入重點吧！部落客打算分兩塊介紹，第一部分是表格初始化部分，第二部分是按鈕操作增删改部分。
首先看看需要引用的js和css檔案
都是一些常用的css和js檔案，我們自定義的js檔案主要有兩個: knockout.bootstraptable.js 和 Department.js 。上篇我們介紹過使用ko可以自定義我們的data-bind。同樣，這裡對于table的綁定，我們也定義一個自定義的綁定，代碼 knockout.bootstraptable.js 裡面。
代碼釋疑：這個js檔案主要做了兩件事
自定義data-bind屬性myBootstrapTable。對于ko.bindingHandlers.myBootstrapTable裡面的update方法，如非必須，可以不用定義。
通過向ko對象裡面添加bootstrapTableViewModel來封裝bootstrapTable。
代碼釋疑：定義一個table标簽，使用自定義綁定myBootstrapTable，上篇說過，$root可以了解為初始化的意思。為了簡單，所有的colums就直接在<th>裡面寫了。
在頁面加載完成之後，啟動ko的綁定：
代碼釋疑：頁面加載完成之後，調用上面封裝的bootstrapTableViewModel對象合并傳遞的參數，最後激活綁定，将this.myViewModel作為綁定的viewmodel激活。調試代碼可知，當執行到 ko.applyBindings(this.myViewModel, document.getElementById("tb_dept")); 這一句的時候，自定義綁定才會生效，程式才會進入到 ko.bindingHandlers.myBootstrapTable 對象的init方法去初始化bootstrapTable。這裡需要說明一點：
上文中的init方法，通過第二個參數valueAccessor，我們得到的是目前綁定的viewmodel，也就是我們上面的this.myViewModel這個對象，部落客覺得這一點有利于你了解自定義綁定的邏輯。基本上執行到 var $ele = $(element).bootstrapTable(oViewModel.params); 這一句的時候，我們表格的初始化就完成了。背景對應的方法部落客随便定義了一個集合，為了完整，這裡還是貼出來：
DepartmentController
上面通過bootstrapTable的初始化完成了我們的自定義data-bind的使用。下面的按鈕操作我們來體驗一把使用監控屬性的“爽歪歪”。
首先在view頁面上面定義我們的增删改按鈕
為了簡便，部落客使用了一個隐藏的彈出框用來包含新增和編輯的文本框。當然，一般情況下，可能這裡用的是部分視圖，你的項目裡面可能會有一個Edit.cshtml，但這裡部落客将這些都放在一個頁面上面，因為這不是文本的重點。
代碼釋疑：說說這裡的執行邏輯，首先在$(function(){})方法裡面調用 operate.operateInit(); 。在operateInit()方法裡面注冊頁面上面按鈕的點選事件，同時也定義 this.DepartmentModel 作為我們新增編輯的viewmodel，這個viewmodel裡面定義了和頁面元素對應的監控屬性。還記得上面隐藏的彈出框裡面的一些data-bind嗎，沒錯，裡面對應的value值就是和這裡的監控屬性對應，這樣設定綁定之後，js裡面所有的導緻 this.DepartmentModel 裡面監控的變化，都會觸發界面上面這些綁定标簽的value值變化，反之，界面上面的所有标簽的Value值的變化，也勢必會引起它的監控屬性值的變化，此之所謂雙向綁定。下面具體看看雙向綁定的執行。
當我們界面觸發新增操作的時候，首先會彈出上面說的隐藏模态框。在模态框顯示的時候，首先定義一個空的viewmodel，然後調用 ko.utils.extend(operate.DepartmentModel, oEmptyModel); 這一句，将全局的operate.DepartmentModel被空的viewmodel覆寫。ko.utils.extend()這個方法的作用和jquery裡面的$.extend()作用類似，都是根據後面對象合并前面對象，合并之後，使用新的viewmodel激活綁定。激活綁定之後，注冊儲存按鈕的click事件。這樣新增的時候，彈出模态框，由于viewmodel裡面的監控屬性都是空的，對應界面元素的value也會被清空，是以新增我們看到是這樣：
當彈出框關閉後，我們通過關閉的事件，執行 ko.cleanNode(document.getElementById("myModal")); 這一句，這個很重要，因為對于同一個dom，ko隻能綁定一次，如果需要再次綁定，需要先清空綁定，并且cleanNode()這個方法，它不僅會清空綁定，還是會dom裡面注冊的事件也會清空，使用的時候需要注意下！
當我們觸發編輯操作的時候，界面還是彈出框。在彈出框的彈出事件裡面，我們取到目前選中的行，然後校驗是否選中了一行。最好通過 ko.mapping.fromJS(arrselectedData[0]) 這一句，将普通的Json對象轉換為帶有監控屬性的viewmodel，上篇說過，這個方法需要 knockout.mapping-latest.js 這個js檔案的支援。轉換之後，還是通過ko.utils.extend()方法更新viewmodel，然後激活綁定。由于viewmodel被目前選中行的資料更新了，是以得到結果：
在新增和編輯彈出框之後，修改相關資訊後點選儲存，就會觸發儲存事件。
當觸發儲存事件的時候，我們首先取到頁面綁定的viewmodel，即operate.DepartmentModel，然後使用ko.toJS()方法将帶有監控屬性的viewmodel轉換為純資料的Json對象，這個方法是ko内置的，不需要其他js支援。得到json對象之後，發送ajax請求，去新增或者編輯資料。這樣就很好地展現了雙向綁定，界面上面所有文本框的value發生了變化之後，也會觸發operate.DepartmentModel的變化。
删除操作沒什麼好說的，和ko關系不大。
以上通過一個簡單的增删改查操作，介紹了下ko和bootstrapTable的聯合使用。ko可以讓你從DOM中解放出來，把關注點放在viewmodel上面。縱觀整個js代碼，幾乎看不到jquery的val()、text()等對界面dom做取值和指派的操作，是不是看着幹淨清爽，并且高大上了呢~~當然，這或許隻是ko的一些比較基礎的用法，畢竟部落客學習ko才3天，更多進階用法還有待摸索，等過段時間用熟了，再将它的一些進階用法分享給大家。如果你覺得本文能夠幫助你了解ko的原理以及它的一些用法，不妨推薦下，部落客一定繼續努力！
本文轉自懶得安分部落格園部落格，原文連結：http://www.cnblogs.com/landeanfen/p/5407221.html，如需轉載請自行聯系原作者