綁定語法（1）

1?? visible 綁定

目的

visible綁定到DOM元素上，使得該元素的hidden或visible狀態(tài)取決于綁定的值。

例子

<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
</script>

參數(shù)

????主參數(shù)

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

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

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

?????其它參數(shù)

??????? 無

注：使用函數(shù)或者表達(dá)式來控制元素的可見性

你也可以使用JavaScript函數(shù)或者表達(dá)式作為參數(shù)。這樣的話，函數(shù)或者表達(dá)式的結(jié)果將決定是否顯示/隱藏這個(gè)元素。例如：

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

<script type="text/javascript">
    var viewModel = {
        myValues: ko.observableArray([]) // Initially empty, so message hidden
    };
    viewModel.myValues.push("some value"); // Now visible
</script>

依賴性

除KO核心類庫外，無依賴。

2?? text 綁定

目的

text 綁定到DOM元素上，使得該元素顯示的文本值為你綁定的參數(shù)。該綁定在顯示或者上非常有用，但是你可以用在任何元素上。

例子

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ù)

????主參數(shù)

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

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

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

????其它參數(shù)

??????? 無

注1：使用函數(shù)或者表達(dá)式來決定text值

如果你想讓你的text更可控，那選擇是創(chuàng)建一個(gè)依賴監(jiān)控屬性（dependent observable），然后在它的執(zhí)行函數(shù)里編碼，決定應(yīng)該顯示什么樣的text文本。

例如：

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

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

    viewModel.priceRating = ko.dependentObservable(function () {
        returnthis.price() >50?"expensive" : "affordable";
    }, viewModel);
</script>

現(xiàn)在，text文本將在“expensive”和“affordable”之間替換，取決于價(jià)格怎么改變。

然而，如果有類似需求的話其實(shí)沒有必要再聲明一個(gè)依賴監(jiān)控屬性（dependent observable）， 你只需要按照如下代碼寫JavaScript表達(dá)式就可以了：

The item is <span data-bind="text: price() > 50 ? 'expensive' : 'affordable'"></span> today.

結(jié)果是一樣的，但我們不需要再聲明依賴監(jiān)控屬性（dependent observable）。

注2：關(guān)于HTML encoding

因?yàn)樵摻壎ㄊ窃O(shè)置元素的innerText或textContent （而不是innerHTML），所以它是安全的，沒有HTML或者腳本注入的風(fēng)險(xiǎn)。例如：如果你編寫如下代碼：

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

… 它不會顯示斜體字，而是原樣輸出標(biāo)簽。如果你需要顯示HTML內(nèi)容，請參考html綁定.

注3：關(guān)于IE 6的白空格whitespace

IE6有個(gè)奇怪的問題，如果 span里有空格的話，它將自動變成一個(gè)空的span。如果你想編寫如下的代碼的話，那Knockout將不起任何作用：

Welcome, <span data-bind="text: userName"></span> to our web site.

… IE6 將不會顯示span中間的那個(gè)空格，你可以通過下面這樣的代碼避免這個(gè)問題：

Welcome, <span data-bind="text: userName">&nbsp;</span> to our web site.

IE6以后版本和其它瀏覽器都沒有這個(gè)問題

依賴性

除KO核心類庫外，無依賴。

3?? html 綁定

目的

html綁定到DOM元素上，使得該元素顯示的HTML值為你綁定的參數(shù)。如果在你的view model里聲明HTML標(biāo)記并且render的話，那非常有用。

例子

<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è)對象或者數(shù)組），那顯示的文本將是yourParameter.toString()的等價(jià)內(nèi)容。

????其它參數(shù)

??????? 無

注：關(guān)于HTML encoding

因?yàn)樵摻壎ㄔO(shè)置元素的innerHTML，你應(yīng)該注意不要使用不安全的HTML代碼，因?yàn)橛锌赡芤鹉_本注入攻擊。如果你不確信是否安全（比如顯示用戶輸入的內(nèi)容），那你應(yīng)該使用text綁定，因?yàn)檫@個(gè)綁定只是設(shè)置元素的text 值innerText和textContent。

依賴性

除KO核心類庫外，無依賴。

4?? css 綁定

目的

css綁定是添加或刪除一個(gè)或多個(gè)CSS class到DOM元素上。 非常有用，比如當(dāng)數(shù)字變成負(fù)數(shù)時(shí)高亮顯示。（注：如果你不想應(yīng)用CSS class而是想引用style屬性的話，請參考style綁定。）

例子

<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對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應(yīng)該使用這個(gè)CSS class。

??? 你可以一次設(shè)置多個(gè)CSS class。例如，如果你的view model有一個(gè)叫isServre的屬性，

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

??? 非布爾值會被解析成布爾值。例如， 0和null被解析成false，21和非null對象被解析成true。

??? 如果參數(shù)是監(jiān)控屬性observable的，那隨著值的變化將會自動添加或者刪除該元素上的CSS class。如果不是，那CSS class將會只添加或者刪除一次并且以后不在更新。

??? 你可以使用任何JavaScript表達(dá)式或函數(shù)作為參數(shù)。KO將用它的執(zhí)行結(jié)果來決定是否應(yīng)用或刪除CSS class。

????其它參數(shù)

??????? 無

注：應(yīng)用的CSS class的名字不是合法的JavaScript變量命名

如果你想使用my-class class，你不能寫成這樣：

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

… 因?yàn)閙y-class不是一個(gè)合法的命名。解決方案是：在my-class兩邊加引號作為一個(gè)字符串使用。這是一個(gè)合法的JavaScript 對象 文字（從JSON技術(shù)規(guī)格說明來說，你任何時(shí)候都應(yīng)該這樣使用，雖然不是必須的）。例如,

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

依賴性

除KO核心類庫外，無依賴。

5?? style 綁定

目的

style綁定是添加或刪除一個(gè)或多個(gè)DOM元素上的style值。比如當(dāng)數(shù)字變成負(fù)數(shù)時(shí)高亮顯示，或者根據(jù)數(shù)字顯示對應(yīng)寬度的Bar。（注：如果你不是應(yīng)用style值而是應(yīng)用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>

當(dāng)currentProfit 小于0的時(shí)候div的style.color是紅色，大于的話是黑色。

參數(shù)

????主參數(shù)

??? 該參數(shù)是一個(gè)JavaScript對象，屬性是你的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的，那隨著值的變化將會自動添加或者刪除該元素上的style值。如果不是，那style值將會只應(yīng)用一次并且以后不在更新。

??? 你可以使用任何JavaScript表達(dá)式或函數(shù)作為參數(shù)。KO將用它的執(zhí)行結(jié)果來決定是否應(yīng)用或刪除style值。

????其它參數(shù)

??????? 無

注：應(yīng)用的style的名字不是合法的JavaScript變量命名

如果你需要應(yīng)用font-weight或者text-decoration，你不能直接使用，而是要使用style對應(yīng)的JavaScript名稱。

??? 錯(cuò)誤：?{ font-weight: someValue }; ?????????? 正確：?{ fontWeight: someValue }

??? 錯(cuò)誤：?{ text-decoration: someValue };????? 正確：?{ textDecoration: someValue }

參考：style名稱和對應(yīng)的JavaScript 名稱列表。

依賴性

除KO核心類庫外，無依賴。

6?? attr 綁定

目的

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

例子

<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對象，屬性是你的attribute名稱，值是該attribute需要應(yīng)用的值。

??? 如果參數(shù)是監(jiān)控屬性observable的，那隨著值的變化將會自動添加或者刪除該元素上的attribute值。如果不是，那attribute值將會只應(yīng)用一次并且以后不在更新。

? ??其它參數(shù)

?????? ?無

注：應(yīng)用的屬性名字不是合法的JavaScript變量命名

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

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

… 因?yàn)閐ata-something 不是一個(gè)合法的命名。解決方案是：在data-something兩邊加引號作為一個(gè)字符串使用。這是一個(gè)合法的JavaScript 對象 文字（從JSON技術(shù)規(guī)格說明來說，你任何時(shí)候都應(yīng)該這樣使用，雖然不是必須的）。例如,

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

依賴性

除KO核心類庫外，無依賴。