入門

簡介

Knockout有如下4大重要概念：

• 聲明式綁定 (Declarative Bindings)：使用簡明易讀的語法很容易地將模型(model) 數(shù)據(jù)關(guān)聯(lián)到DOM元素上。
• UI界面自動刷新 (Automatic UI Refresh)：當(dāng)您的模型狀態(tài)(model state)改變時，您的UI界面將自動更新。
• 依賴跟蹤 (Dependency Tracking)：為轉(zhuǎn)變和聯(lián)合數(shù)據(jù)，在你的模型數(shù)據(jù)之間隱式建立關(guān)系。
• 模板 (Templating)：為您的模型數(shù)據(jù)快速編寫復(fù)雜的可嵌套的UI。

好處

重要特性:

• 優(yōu)雅的依賴追蹤- 不管任何時候你的數(shù)據(jù)模型更新，都會自動更新相應(yīng)的內(nèi)容。
• 聲明式綁定- 淺顯易懂的方式將你的用戶界面指定部分關(guān)聯(lián)到你的數(shù)據(jù)模型上。
• 靈活全面的模板- 使用嵌套模板可以構(gòu)建復(fù)雜的動態(tài)界面。
• 輕易可擴(kuò)展- 幾行代碼就可以實現(xiàn)自定義行為作為新的聲明式綁定。 額外的好處：
• 純JavaScript類庫 – 兼容任何服務(wù)器端和客戶端技術(shù)
• 可添加到Web程序最上部 – 不需要大的架構(gòu)改變
• 簡潔的 – Gzip之前大約25kb
• 兼容任何主流瀏覽器 (IE 6 、Firefox 2 、Chrome、Safari、其它)
• Comprehensive suite of specifications （采用行為驅(qū)動開發(fā)） 意味著在新的瀏覽器和平臺上可以很容易通過驗證。

Knockout綁定語法

visible 綁定

當(dāng)參數(shù)設(shè)置為一個假值時(例如：布爾值false， 數(shù)字值0， 或者null， 或者undefined) ,該綁定將設(shè)置該元素的style.display值為none，讓元素隱藏。它的優(yōu)先級高于你在CSS里定義的任何display樣式。

當(dāng)參數(shù)設(shè)置為一個真值時(例如：布爾值true，或者非空non-null的對象或者數(shù)組) ,該綁定會刪除該元素的style.display值，讓元素可見。然后你在CSS里自定義的display樣式將會自動生效。

如果參數(shù)是監(jiān)控屬性observable的，那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化，如果不是，那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。 注：使用函數(shù)或者表達(dá)式來控制元素的可見性

text 綁定

KO將參數(shù)值會設(shè)置在元素的innerText (IE)或textContent(Firefox和其它相似瀏覽器)屬性上。原來的文本將會被覆蓋。

如果參數(shù)是監(jiān)控屬性observable的，那元素的text文本將根據(jù)參數(shù)值的變化而更新，如果不是，那元素的text文本將只設(shè)置一次并且以后不在更新。

如果你傳的不是數(shù)字或者字符串(例如一個對象或者數(shù)組)，那顯示的文本將是yourParameter.toString()的等價內(nèi)容。(object)

注1：使用函數(shù)或者表達(dá)式來決定text值 如果你想讓你的text更可控，那選擇是創(chuàng)建一個依賴監(jiān)控屬性(dependent observable), 然后在它的執(zhí)行函數(shù)里編碼，決定應(yīng)該顯示什么樣的text文本。 注2：關(guān)于HTML encoding 設(shè)置元素的innerText或textContent (而不是innerHTML) 關(guān)于IE 6的白空格whitespace Welcome, <span data-bind="text: userName"></span> to our web site.->Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

html 綁定

html綁定到DOM元素上，使得該元素顯示的HTML值為你綁定的參數(shù)。如果在你的view model里聲明HTML標(biāo)記并且render的話，那非常有用。 KO設(shè)置該參數(shù)值到元素的innerHTML屬性上，元素之前的內(nèi)容將被覆蓋。

css 綁定

該參數(shù)是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應(yīng)該使用這個CSS class。 非布爾值會被解析成布爾值。例如， 0和null被解析成false，21和非null對象被解析成true。

應(yīng)用的CSS class的名字不是合法的JavaScript變量命名 如果你想使用my-class 在my-class兩邊加引號作為一個字符串使用

style 綁定

style綁定是添加或刪除一個或多個DOM元素上的style值 該參數(shù)是一個JavaScript對象，屬性是你的style的名稱，值是該style需要應(yīng)用的值。 你可以一次設(shè)置多個style值

應(yīng)用的style的名字不是合法的JavaScript變量命名 錯誤： { font-weight: someValue }; 正確： { fontWeight: someValue }

錯誤： { text-decoration: someValue }; 正確： { textDecoration: someValue }

attr 綁定

attr 綁定提供了一種方式可以設(shè)置DOM元素的任何屬性值 該參數(shù)是一個JavaScript對象，屬性是你的attribute名稱，值是該attribute需要 應(yīng)用的值。 應(yīng)用的屬性名字不是合法的JavaScript變量命名 如果你要用的屬性名稱是data-something的話 解決方案是：在data-something兩邊加引號作為一個字符串使用

click 綁定

click綁定在DOM元素上添加事件句柄以便元素被點擊的時候執(zhí)行定義的JavaScript 函數(shù) 注1：傳參數(shù)給你的click 句柄

<button data-bind="click: function() { viewModel.myFunction(1, 2) }"> Click me </button> 

注2：訪問事件源對象 myFunction: function (event) 如果你需要的話，可以使用匿名函數(shù)的第一個參數(shù)傳進(jìn)去，然后在里面調(diào)用： 注3: 允許執(zhí)行默認(rèn)事件 默認(rèn)情況下，Knockout會阻止冒泡，防止默認(rèn)的事件繼續(xù)執(zhí)行。例如，如果你點擊一個a連接，在執(zhí)行完自定義事件時它不會連接到href地址。這特別有用是因為你的自定義事件主要就是操作你的view model，而不是連接到另外一個頁面。

當(dāng)然，如果你想讓默認(rèn)的事件繼續(xù)執(zhí)行，你可以在你click的自定義函數(shù)里返回true。 注4：控制this句柄 注5：防止事件冒泡 clickBubble 可以通過額外的綁定clickBubble來禁止冒泡

event 綁定

大部分情況下是用在keypress，mouseover和mouseout上。