第二天

?任務：綁定時間看完，弄懂。時間：8H

1.visible 綁定

目的：是的該元素的hidden或者visible的值跟隨綁定的值變化而變化

eg:

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

<script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
ko.applyBindings(viewModel);
</script>

主參數
?當參數設置為一個假值時（例如：布爾值 false， 數字值 0， 或 者 null， 或者 undefined） ,該綁定將設置該元素的 style.display 值為 none， 讓元素隱藏。它的優先級高于你在 CSS 里定義的任何 display 樣式。
當參數設置為一個真值時（例如：布爾值 true，或者非空 non-null 的對象或者數組） ,該綁定會刪除該元素的 style.display 值，讓元 素可見。然后你在 CSS 里自定義的 display 樣式將會自動生效。
如果參數是監控屬性 observable 的，那元素的 visible 狀態將根 據參數值的變化而變化，如果不是，那元素的 visible 狀態將只設置一次并且以 后不在更新。

?

2 text 綁定
目的 :
text 綁定到 DOM 元素上，使得該元素顯示的文本值為你綁定的參數。該綁定在 顯示<span>或者<em>上非常有用，但是你可以用在任何元素上。

eg

Today's message is: <span data-bind="text: myMessage"></span>

<script type="text/javascript"> var viewModel = { myMessage: ko.observable() // Initially blank }; viewModel.myMessage("Hello, world!"); // Text appears </script>

參數的理解：

KO 將參數值會設置在元素的 innerText （IE）或 textContent（Firefox 和其它相似瀏覽器）屬性上。原來的文本將會被覆蓋。
如果參數是監控屬性 observable 的，那元素的 text 文本將根據參數值 的變化而更新，如果不是，那元素的 text 文本將只設置一次并且以后不在更新。
如果你傳的是不是數字或者字符串（例如一個對象或者數組），那顯示 的文本將是 yourParameter.toString()的等價內容。

?

3 html 綁定
? ? ? 目的 ：
? ? ? ? ? html 綁定到 DOM 元素上，使得該元素顯示的 HTML 值為你綁定的參數。如果在你 的 view model 里聲明 HTML 標記并且 render 的話，那非常有用。

eg：

<div data-bind="html: details"></div>

<script type="text/javascript"> var viewModel = { details: ko.observable() // Initially blank };

viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); // HTML content appears </script>

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

如果參數是監控屬性 observable 的，那元素的內容將根據參數值的變化 而更新，如果不是，那元素的內容將只設置一次并且以后不在更新。
如果你傳的是不是數字或者字符串（例如一個對象或者數組），那顯示 的文本將是 yourParameter.toString()的等價內容。

?

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

eg：

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div>

<script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class };

viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied </script>
效果就是當 currentProfit 小于 0 的時候，添加 profitWarning CSS class 到 元素上，如果大于 0 則刪除這個 CSS class。

參數
主參數
該參數是一個 JavaScript 對象，屬性是你的 CSS class 名稱，值是比較 用的 true 或 false，用來決定是否應該使用這個 CSS class。
你可以一次設置多個 CSS class。例如，如果你的 view model 有一個叫 isServre 的屬性，
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
非布爾值會被解析成布爾值。例如， 0 和 null 被解析成 false，21 和 非 null 對象被解析成 true。
如果參數是監控屬性 observable 的，那隨著值的變化將會自動添加或者 刪除該元素上的 CSS class。如果不是，那 CSS class 將會只添加或者刪除一次 并且以后不在更新。
你可以使用任何 JavaScript 表達式或函數作為參數。KO 將用它的執行 結果來決定是否應用或刪除 CSS class。

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

例子
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information </div>


<script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially black }; viewModel.currentProfit(-50); // Causes the DIV's contents to go red </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 值。

?

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

例子
<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") }; </script>
呈現結果是該連接的 href 屬性被設置為 year-end.html， title 屬性被設置為 Report including final year-end statistics。

參數
主參數
該參數是一個 JavaScript 對象，屬性是你的 attribute 名稱，值是該 attribute 需要應用的值。
如果參數是監控屬性 observable 的，那隨著值的變化將會自動添加或者 刪除該元素上的 attribute 值。如果不是，那 attribute 值將會只應用一次并且 以后不在更新。

?

轉載于:https://www.cnblogs.com/lu2527/p/8092966.html

總結

以上是生活随笔為你收集整理的Kncok之绑定事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。