第二天

?任務(wù)：綁定時(shí)間看完，弄懂。時(shí)間：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>

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

?

2 text 綁定
目的 :
text 綁定到 DOM 元素上，使得該元素顯示的文本值為你綁定的參數(shù)。該綁定在 顯示<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>

參數(shù)的理解：

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

?

3 html 綁定
? ? ? 目的 ：
? ? ? ? ? html 綁定到 DOM 元素上，使得該元素顯示的 HTML 值為你綁定的參數(shù)。如果在你 的 view model 里聲明 HTML 標(biāo)記并且 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>

參數(shù)
主參數(shù)
KO設(shè)置該參數(shù)值到元素的 innerHTML 屬性上，元素之前的內(nèi)容將被覆蓋。

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

?

4 css 綁定
? ? 目的：?
? ? ? css 綁定是添加或刪除一個(gè)或多個(gè) CSS class 到 DOM 元素上。 非常有用，比如 當(dāng)數(shù)字變成負(fù)數(shù)時(shí)高亮顯示。（注：如果你不想應(yīng)用 CSS class 而是想引用 style 屬性的話，請(qǐng)參考 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>
效果就是當(dāng) currentProfit 小于 0 的時(shí)候，添加 profitWarning CSS class 到 元素上，如果大于 0 則刪除這個(gè) CSS class。

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

5 style 綁定
目的
style 綁定是添加或刪除一個(gè)或多個(gè) DOM 元素上的 style 值。比如當(dāng)數(shù)字變成負(fù) 數(shù)時(shí)高亮顯示，或者根據(jù)數(shù)字顯示對(duì)應(yīng)寬度的 Bar。（注：如果你不是應(yīng)用 style 值而是應(yīng)用 CSS class 的話，請(qǐng)參考 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>
當(dāng) currentProfit 小于 0 的時(shí)候 div 的 style.color 是紅色，大于的話是黑色。

參數(shù)
主參數(shù)
該參數(shù)是一個(gè) JavaScript 對(duì)象，屬性是你的 style 的名稱，值是該 style 需要應(yīng)用的值。
你可以一次設(shè)置多個(gè) style 值。例如，如果你的 view model 有一個(gè)叫 isServre 的屬性，
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>
如果參數(shù)是監(jiān)控屬性 observable 的，那隨著值的變化將會(huì)自動(dòng)添加或者 刪除該元素上的 style 值。如果不是，那 style 值將會(huì)只應(yīng)用一次并且以后不在 更新。
你可以使用任何 JavaScript 表達(dá)式或函數(shù)作為參數(shù)。KO 將用它的執(zhí)行 結(jié)果來(lái)決定是否應(yīng)用或刪除 style 值。

?

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

例子
<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>
呈現(xiàn)結(jié)果是該連接的 href 屬性被設(shè)置為 year-end.html， title 屬性被設(shè)置為 Report including final year-end statistics。

參數(shù)
主參數(shù)
該參數(shù)是一個(gè) JavaScript 對(duì)象，屬性是你的 attribute 名稱，值是該 attribute 需要應(yīng)用的值。
如果參數(shù)是監(jiān)控屬性 observable 的，那隨著值的變化將會(huì)自動(dòng)添加或者 刪除該元素上的 attribute 值。如果不是，那 attribute 值將會(huì)只應(yīng)用一次并且 以后不在更新。

?

轉(zhuǎn)載于:https://www.cnblogs.com/lu2527/p/8092966.html

總結(jié)

以上是生活随笔為你收集整理的Kncok之绑定事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。