Knockout應用開發指南第三章：繫結語法（1）

第三章所有程式碼都需要啟用KO的ko.applyBindings(viewModel);功能，才能使程式碼生效，為了節約篇幅，所有例子均省略了此行程式碼。

1   visible 繫結

目的

visible繫結到DOM元素上，使得該元素的hidden或visible狀態取決於繫結的值。

例子

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

引數

    主引數

        當引數設定為一個假值時（例如：布林值false， 數字值0， 或者null， 或者undefined） ,該繫結將設定該元素的style.display值為none，讓元素隱藏。它的優先順序高於你在CSS裡定義的任何display樣式。

        當引數設定為一個真值時（例如：布林值true，或者非空non-null的物件或者陣列） ,該繫結會刪除該元素的style.display值，讓元素可見。然後你在CSS裡自定義的display樣式將會自動生效。

        如果引數是監控屬性observable的，那元素的visible狀態將根據引數值的變化而變化，如果不是，那元素的visible狀態將只設定一次並且以後不在更新。

     其它引數

        無

注：使用函式或者表示式來控制元素的可見性

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

<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元素上，使得該元素顯示的文字值為你繫結的引數。該繫結在顯示<span>或者<em>上非常有用，但是你可以用在任何元素上。

例子

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()的等價內容。

    其它引數

        無

注1：使用函式或者表示式來決定text值

如果你想讓你的text更可控，那選擇是建立一個依賴監控屬性（dependent observable），然後在它的執行函式裡編碼，決定應該顯示什麼樣的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>

現在，text文字將在“expensive”和“affordable”之間替換，取決於價格怎麼改變。

然而，如果有類似需求的話其實沒有必要再宣告一個依賴監控屬性（dependent observable）， 你只需要按照如下程式碼寫JavaScript表示式就可以了：

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

結果是一樣的，但我們不需要再宣告依賴監控屬性（dependent observable）。

注2：關於HTML encoding

因為該繫結是設定元素的innerText或textContent （而不是innerHTML），所以它是安全的，沒有HTML或者指令碼注入的風險。例如：如果你編寫如下程式碼：

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

… 它不會顯示斜體字，而是原樣輸出標籤。如果你需要顯示HTML內容，請參考html繫結.

注3：關於IE 6的白空格whitespace

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

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

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

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

IE6以後版本和其它瀏覽器都沒有這個問題

依賴性

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

3   html 繫結

目的

html繫結到DOM元素上，使得該元素顯示的HTML值為你繫結的引數。如果在你的view model裡宣告HTML標記並且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>  

引數

    主引數

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

    如果引數是監控屬性observable的，那元素的內容將根據引數值的變化而更新，如果不是，那元素的內容將只設定一次並且以後不在更新。

    如果你傳的是不是數字或者字串（例如一個物件或者陣列），那顯示的文字將是yourParameter.toString()的等價內容。

    其它引數

        無

注：關於HTML encoding

因為該繫結設定元素的innerHTML，你應該注意不要使用不安全的HTML程式碼，因為有可能引起指令碼注入攻擊。如果你不確信是否安全（比如顯示使用者輸入的內容），那你應該使用text繫結，因為這個繫結只是設定元素的text 值innerText和textContent。

依賴性

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

4   css 繫結

目的

css繫結是新增或刪除一個或多個CSS class到DOM元素上。 非常有用，比如當數字變成負數時高亮顯示。（注：如果你不想應用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>

效果就是當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。

    其它引數

        無

注：應用的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>

依賴性

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

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值。

    其它引數

        無

注：應用的style的名字不是合法的JavaScript變數命名

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

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

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

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

依賴性

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

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值將會只應用一次並且以後不在更新。

    其它引數

        無

注：應用的屬性名字不是合法的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>

依賴性

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