3.Knockout.Js（屬性綁定）

前言

讓visible綁定到DOM元素上，使得該元素的hidden或visible取決於綁定的值。

簡單的綁定

 首先仍是先定義一個ViewModel 

    var AppViewModel = { shouldShowMessage: ko.observable(true) ///初始化的時候div是visible的  }; AppViewModel.shouldShowMessage = ko.observable(false); ///如今hidden勒 ko.applyBindings( AppViewModel);

而且經過ko.applyBindins進行激活Knockout。

而後定義一個UI界面元素

<div data-bind="visible:shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. </div>

運行以後此div在初始化的時候仍是顯示的能夠，以後就被從新賦值爲false,致使此div被隱藏掉了。

參數：

當參數設置爲一個假值時（例如：布爾值false， 數字值0， 或者null， 或者undefined） ,該綁定將設置該元素的style.display值爲none，讓元素隱藏。它的優先級高於你在CSS裏定義的任何display樣式。

當參數設置爲一個真值時（例如：布爾值true，或者非空non-null的對象或者數組） ,該綁定會刪除該元素的style.display值，讓元素可見。而後你在CSS裏自定義的display樣式將會自動生效。

若是參數是監控屬性observable的，那元素的visible狀態將根據參數值的變化而變化，若是不是，那元素的visible狀態將只設置一次而且之後不在更新。

使用函數或者表達式來控制元素的可見性

你也可使用JavaScript函數或者表達式做爲參數。這樣的話，函數或者表達式的結果將決定是否顯示/隱藏這個元素。例如：

<script type="text/javascript"> var AppViewModel = { shouldShowMessage: ko.observable(true), ///初始化的時候div是visible的  myValues: ko.observableArray([]) }; AppViewModel.shouldShowMessage = ko.observable(false); ///如今hidden勒 AppViewModel.myValues.push("some value"); ///向myValues數組中 添加一個項  ko.applyBindings( AppViewModel); </script>

在ViewModel中添加了一個myValues的屬性值

同時給myValues的數組添加了一個項

而且在頁面UI中綁定了一個元素

<div data-bind="visible: myValues().length > 0"> 
　　You will see this message only when 'myValues' has at least one member.
</div>

就這樣當添加完"some value"元素以後，myValues().length>0 則結果爲true 

那麼此div就會顯示出來。

前言

text 綁定到DOM元素上，使得該元素顯示的文本值爲你綁定的參數。該綁定在顯示<span>或者<em>上很是有用，可是你能夠用在任何元素上。

簡單綁定

Today's message is: <span data-bind="text: myMessage"></span> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { myMessage: ko.observable() }; viewModel.myMessage("Hello, world!"); ko.applyBindings(viewModel); </script>

    KO將參數值會設置在元素的innerText （IE）或textContent（Firefox和其它類似瀏覽器）屬性上。原來的文本將會被覆蓋。

    若是參數是監控屬性observable的，那元素的text文本將根據參數值的變化而更新，若是不是，那元素的text文本將只設置一次而且之後不在更新。

    若是你傳的是否是數字或者字符串（例如一個對象或者數組），那顯示的文本將是yourParameter.toString()的等價內容。

使用函數或者表達式來決定text值

 繼續在上面的ViewModel中添加一個屬性，而且添加一個依賴監控屬性

price: ko.observable(24.95) viewModel.priceRating = ko.dependentObservable( function () { return this.price() > 50 ? "expensive" : "affordable"; }, viewModel);

添加一個UI頁面元素進行綁定

The item is <span data-bind="text: priceRating"></span> today.

如今，text文本將在「expensive」和「affordable」之間替換，取決於價格怎麼改變。

關於HTML encoding

由於該綁定是設置元素的innerText或textContent （而不是innerHTML），因此它是安全的，沒有HTML或者腳本注入的風險。例如：若是你編寫以下代碼：

viewModel.myMessage("<i>Hello, world!</i>");

 它不會顯示斜體字，而是原樣輸出標籤。若是你須要顯示HTML內容，請參考html綁定.

關於IE 6的白空格whitespace

IE6有個奇怪的問題，若是 span裏有空格的話，它將自動變成一個空的span。若是你想編寫以下的代碼的話，那Knockout將不起任何做用：

Html綁定

html綁定到DOM元素上，使得該元素顯示的HTML值爲你綁定的參數。若是在你的view model裏聲明HTML標記而且render的話，那很是有用。

簡單示例

<div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() }; ko.applyBindings(viewModel); viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); </script>

這樣Html 的EM標籤就會顯示於此

KO設置該參數值到元素的innerHTML屬性上，元素以前的內容將被覆蓋。

若是參數是監控屬性observable的，那元素的內容將根據參數值的變化而更新，若是不是，那元素的內容將只設置一次而且之後不在更新。

若是你傳的是否是數字或者字符串（例如一個對象或者數組），那顯示的文本將是yourParameter.toString()的等價內容。

關於HTML encoding

 由於該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，由於有可能引發腳本注入攻擊。若是你不確信是否安全（好比顯 示用戶輸入的內容），那你應該使用text綁定，由於這個綁定只是設置元素的text 值innerText和textContent。

Css綁定

 css綁定是添加或刪除一個或多個CSS class到DOM元素上。 很是有用，好比當數字變成負數時高亮顯示。（注：若是你不想應用CSS class而是想引用style屬性的話，請參考style綁定。）

簡單示例

<p style="background: gray; color: #ffffff; font-size: 18pt;">Html綁定</p>

<script type="text/javascript"> var viewModel = { details: ko.observable(), currentProfit: ko.observable(150000) }; ko.applyBindings(viewModel); viewModel.currentProfit(-50); viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); </script> 

運行後的效果爲

記得還寫了一個css樣式

.profitWarning {
    color: red;
}

 該參數是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應該使用這個CSS class。

  你能夠一次設置多個CSS class。例如，若是你的view model有一個叫isServre的屬性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

   若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的CSS class。若是不是，那CSS class將會只添加或者刪除一次而且之後不在更新。

    你可使用任何JavaScript表達式或函數做爲參數。KO將用它的執行結果來決定是否應用或刪除CSS class。

應用的CSS class的名字不是合法的JavaScript變量命名

若是你想使用my-class class，你不能寫成這樣：

<div data-bind="css: { my-class: someValue }">...</div>

 由於my-class不是一個合法的命名。解決方案是：在my-class兩邊加引號做爲一個字符串使用。這是一個合法的JavaScript 對象 文字（從JSON技術規格說明來講，你任什麼時候候都應該這樣使用，雖然不是必須的）。例如

<div data-bind="css: { 'my-class': someValue }">...</div>

 

Style綁定

style綁定是添加或刪除一個或多個DOM元素上的style值。好比當數字變成負數時高亮顯示，或者根據數字顯示對應寬度的Bar。（注：若是你不是應用style值而是應用CSS class的話，請參考CSS綁定。）

Style簡單示例

 

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information </div> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { currentProfit:ko.observable(15000) }; viewModel.currentProfit(-50); ko.applyBindings(viewModel); </script>

簡單示例代碼，運行後發現爲紅色的字體

當currentProfit 小於0的時候div的style.color是紅色，大於的話是黑色。

該參數是一個JavaScript對象，屬性是你的style的名稱，值是該style須要應用的值。

你能夠一次設置多個style值。例如，若是你的view model有一個叫isServre的屬性，

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>

若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的style值。若是不是，那style值將會只應用一次而且之後不在更新。

你可使用任何JavaScript表達式或函數做爲參數。KO將用它的執行結果來決定是否應用或刪除style值。

應用的style的名字不是合法的JavaScript變量命名

 若是你須要應用font-weight或者text-decoration，你不能直接使用，而是要使用style對應的JavaScript名稱。

　 錯誤： { font-weight: someValue };            正確： { fontWeight: someValue }

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

參考：style名稱和對應的JavaScript 名稱列表

attr綁定

attr 綁定提供了一種方式能夠設置DOM元素的任何屬性值。你能夠設置img的src屬性，鏈接的href屬性。使用綁定，當模型屬性改變的時候，它會自動更新。

attr綁定簡單示例

 

<a data-bind="attr: { href: url, title: details }"> Report</a> <script type="text/javascript"> var viewModel = { url: ko.observable("year-end.html"), details: ko.observable("Report including final year-end statistics") }; ko.applyBindings(viewModel); </script>

運行後效果爲

呈現結果是該鏈接的href屬性被設置爲year-end.html， title屬性被設置爲Report including final year-end statistics

該參數是一個JavaScript對象，屬性是你的attribute名稱，值是該attribute須要應用的值。

若是參數是監控屬性observable的，那隨着值的變化將會自動添加或者刪除該元素上的attribute值。若是不是，那attribute值將會只應用一次而且之後不在更新。

應用的屬性名字不是合法的JavaScript變量命名

若是你要用的屬性名稱是data-something的話，你不能這樣寫：

<div data-bind="attr: { data-something: someValue }">...</div>

 由於data-something 不是一個合法的命名。解決方案是：在data-something兩邊加引號做爲一個字符串使用。這是一個合法的JavaScript 對象 文字（從JSON技術規格說明來講，你任什麼時候候都應該這樣使用，雖然不是必須的）。例如

<div data-bind="attr: { ‘data-something’: someValue }">...</div>