本篇主要簡單介紹了knockoutjs中各種綁定的使用方法，使用這些綁定方法的組合就能簡單地做好一個需要較多動態交互的UI頁面。使用這些方法比較重要的一點就是要記住綁定的都是函數對象，所以可以直接在HTML裡面進行操作，這樣的話有時候 js 代碼結構可以更簡單。 ...
本文是【Knockoutjs 學習體驗之旅】系列文章的第2篇，所有demo均基於目前knockoutjs的最新版本（3.4.0）。小茄才識有限，文中若有不當之處，還望大家指出。
目錄：
Knockoutjs 的花式捆綁
提到捆綁，相信很多邪惡的筒子以為小茄第一時間想到的是：
然而，並沒有！
小茄第一時間想到的是 data-bind = "value: price"，data-bind = "text: sum"，data-bind = "XX: OO"……（好吧，這有點用力過猛了）
言歸正傳，在上一篇文章（【Knockoutjs 學習體驗之旅】（1）ko初體驗）中提到，ko中的 data-bind = "XX：OO"綁定大法除了可以綁定text、value等內容，還可以綁定visible、style等外觀屬性，也可以綁定click、textInput等各種事件，甚至還能控製程序流程。各種花式捆綁，絕對滿足你的幻想。
下麵簡單講講各種綁定的使用，主要根據被綁定的屬性分成表現類、流程類和交互類三種。
表現類屬性
表現類的綁定屬性有visible、text、html、css、style、attr幾種，除了css表示css的class之外，其他都很好理解。當然了，style裡面的命名要與js一致，要去掉-改成駝峰命名，示範如下：
<!--HTML code--> <div data-bind="visible: shouldShowMessage">You will see this message only when "shouldShowMessage" holds a true value.</div> <div>Today's message is: <span data-bind="text: myMessage"></span></div> <div data-bind="html: details"></div> <div data-bind="css: { profitWarning: currentProfit() < 0 }">CSS class binding test</div> <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">CSS style binding test</div> <a data-bind="attr: { href: url, title: urltitle }">Report</a>HTML Code
// js code var viewModel = { shouldShowMessage: ko.observable(true), // Message initially visible myMessage: ko.observable(), // Initially blank details: ko.observable(), // Initially blank currentProfit: ko.observable(150000), // Positive value, so initially we don't apply the "profitWarning" class currentProfit: ko.observable(150000), // Positive value, so initially black url: ko.observable("year-end.html"), urltitle: ko.observable("Report including final year-end statistics") }; ko.applyBindings(viewModel); // apply bindsJS Code
效果是這樣的：
上一篇文章裡面也說過，XXOO裡面除了傳單個的屬性，也可以傳JSON對象，也就是說可以組合綁定屬性，比如說：
<!--HTML code--> <div data-bind="{visible: shouldShowMessage, text: myMessage, css: { profitWarning: currentProfit() < 0 }}"> You will see this message only when "shouldShowMessage" holds a true value. </div>
效果當然是這樣的：
表現類的設置比較簡單，要註意的一點就是：很多表現類的屬性並不需要動態變化，這個時候可以利用viewModel中設置實現數據的集中初始化，但是不要把他們設置成可觀察者，如：
// js code var viewModel = { shouldShowMessage: ko.observable(true), // Message initially visible myMessage: '這段文字不需要動態更新' // Initially blank };
流程類屬性
流程類包括foreach、if、ifnot、with和比較高級的"component”綁定，if 和 ifnot 與 visible類似，差別就是：if 會直接從DOM中移除相應的組件，而visible只是控制隱藏顯示，組件還是在DOM裡面的。with 跟 js 中的 with 也是一樣的效果，就是延長了作用域鏈，簡單的來說就是在變數前加了個’首碼.’。這裡只介紹一下foreach，component放到和模板綁定一起介紹。
看看代碼：
<!--HTML code--> <p>測試foreach綁定</p> <ul data-bind="foreach: people"> <li> No.<span data-bind="text: $index"> </span> people's name: <span data-bind="text: name"> </span> <a href="#" data-bind="click: $parent.removePeople">RemovePeople</a> <a href="#" data-bind="click: remove">Remove</a> </li> </ul> <input type="button" data-bind="click: addPeople" value="Add" />HTML Code
var listModel = function () { //設置people數組的值（people實際上是函數數組），使用foreach可以遍曆數組對象 //ul,li對應的是 people和people的子項，所以在li內部綁定時，作用域是在people子項{name……}中，為了調用people外部的removePeople需要用到$parent //如果是調用內部的remove，remove中的this為{name……}對應當前li項，作用域為當前域則不用加 $parent。 this.people = ko.observableArray([ {name: "Mark Zake", remove: function () { that.people.remove(this); //註意當前對象（就是{name……}）和作用域，不用管HTML標簽，純js理解就簡單了 }}, {name: "James Lebo", remove: function () { that.people.remove(this); }}, {name: "Green Deny", remove: function () { that.people.remove(this); }} ]); //addPeople內部調用了同級people的方法，this會發生改變，應該預先保存this傳進去。 var that = this; this.addPeople = function () { that.people.push({ name: new Date().toDateString(), remove: function () { that.people.remove(this); }}); }; //remove的對象是整個 li標簽，也就是 a標簽的父對象。實際上要執行的是 listModel.people.remove(a.parent) this.removePeople = function() { that.people.remove(this); } }; ko.applyBindings(new listModel());JS Code
這裡比較容易搞混的是DOM節點與ViewModel的層次對應關係。首先，在ul上應用 foreach 綁定，也就是每個 li 對應每個 people 子項。這一點對應上了之後，就按照 js 的作用域規則去理解即可。說到作用域，不得不提 this，正所謂我待this如初戀，this坑我千百遍。這裡小茄在官方版本上加了個remove函數，與官方的removePeople對應起來看就簡單了。至於$index, $parent這些變數，按字面意思理解即可。
交互類屬性
終於要到重點了，使用ko的最重要原因就是為了處理動態交互的UI展現問題，這裡集中介紹一下與表單相關的一些綁定。
（1） click綁定
語法：data-bind="click: clickHandler"，這裡的clickHandler函數可以是任意函數，並不一定要是ViewModel里的函數，只要能引用到即可。關於click事件有幾點需要留意的：
1. 參數傳遞，ko預設將當前組件作為第一個參數傳給clickHandler函數，這裡要註意當前的綁定上下文，比如說在with環境中，傳回的組件就會變成with組件而不是你想要的當前組件。如果你還需要傳遞event參數，則將event作為第二個參數傳入。如果還需要傳入更多的參數，那麼就需要使用一個函數包裝起來了。如：
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }"> Click me </button>
2. 預設行為的設置（比如鏈接）
ko預設是禁止預設事件行為的，通常我們為鏈接綁定點擊事件也不會是讓其跳轉的。不過你如果一定要開啟的話，直接在clickHandler裡面return true即可。
3. 冒泡
ko預設是允許冒泡的，你可以通過 data-bind="click: clickHandler, clickBubble: false"來設置click事件不冒泡。
（2）event綁定
ko提供了這個介面讓用戶自定義綁定事件。關於參數傳遞、預設行為、冒泡等與click綁定是一樣的，使用案例：
<div> <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div data-bind="visible: detailsEnabled"> Details </div> </div> <script type="text/javascript"> var viewModel = { detailsEnabled: ko.observable(false), enableDetails: function() { this.detailsEnabled(true); }, disableDetails: function() { this.detailsEnabled(false); } }; ko.applyBindings(viewModel); </script>JS Code
（3）submit綁定
主要用來做一些驗證表單的工作。ko會阻止預設的提交表單動作，並轉入submit綁定的函數中。後續需要提交的時候，在綁定事件中 return true即可。
PS： 為什麼不在表單中使用 click 事件來處理呢？因為 submit 本來就是被設計用來處理提交事件的，它還能接受回車一類的提交動作，但click則不行。
（4）value 與 textInput 綁定
在輸入框綁定 value 和 textInput 看起來效果差不多，但是更推薦使用 textInput 事件進行綁定，因為 textInput 是新增的專門用來處理輸入事件的。在上一篇文章中可以看到，使用 value 綁定時（左）輸入之後必須要將焦點從輸入框中移出才會進行更新，而 textInput （右）是馬上進行更新的。
雖然，value 綁定也可以通過設置 data-bind="{value: price, valueUpdate: 'afterkeydown'}" 實現與 textInput 一樣的效果，但是這個在瀏覽器中的相容性並不如 textInput 好。
（5）options綁定（selectedOptions）
在下拉列表中可使用 options 來綁定子項的值，子項既可以是字元串，也可以是 js 對象。上一篇（【Knockoutjs 學習體驗之旅】（1）ko初體驗）中展示的是字元串，這次就來傳個對象：
代碼：
<p>Your country: <select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select> </p> <div data-bind="visible: selectedCountry"> <!-- Appears when you select something --> You have chosen a country with population <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>. </div> <script type="text/javascript"> // Constructor for an object with two properties var Country = function(name, population) { this.countryName = name; this.countryPopulation = population; }; var viewModel = { availableCountries: ko.observableArray([ new Country("UK", 65000000), new Country("USA", 320000000), new Country("Sweden", 29000000) ]), selectedCountry: ko.observable() // Nothing selected by default }; ko.applyBindings(viewModel); </script>View Code
這裡使用了option來綁定列表框的選項，使用value綁定選中項目。由於選項是 js 對象，所以要用一個 optionText 來指定在列表框中的展示。optionCaption是指無選中任何項目時候的預設顯示值。如果我們設定的是多選列表框的話，那麼就不能用 value 來綁定選中項目了，這個時候要用到 selectOptions來綁定選中項目。
（6）其他綁定：enable/disable, hasFocus , checked , uniqueName。
這些事件用起來非常簡單，就不具體介紹了。最後一個 uniqueName 是用來設置表單控制項的唯一 name 屬性的，表單中提交到後臺時，沒有設置 name 屬性的值時不會被提交到後臺的，所以就有了這麼個綁定功能。官網中關於 hasFoucus 還有個比較常用的效果：
Name:
Click the name to edit it; click elsewhere to apply changes.
點擊上面的姓名就可以變成可編輯狀態，失去焦點後又變成普通文字，這種效果用ko實現起來相當簡單。
總結
本篇主要簡單介紹了knockoutjs中各種綁定的使用方法，使用這些綁定方法的組合就能簡單地做好一個需要較多動態交互的UI頁面。使用這些方法比較重要的一點就是要記住綁定的都是函數對象，所以可以直接在HTML裡面進行操作，這樣的話有時候 js 代碼結構可以更簡單。
關於綁定的介紹就到這裡了，下一篇再見。碼字不易，隨手點贊哈~~~
參考資料：
- 官方教程： http://knockoutjs.com/documentation/introduction.html
- 湯姆大叔教程（官方教程翻譯，版本太舊，信息缺失明顯）： http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
- 深入淺出Knockoutjs： http://www.w2bc.com/Article/25175
文字較多，慣例湊圖！
原創文章，轉載請註明出處！本文鏈接：http://www.cnblogs.com/qieguo/p/5563254.html
