綁定語法（1） · Knockout應用開發指南

## 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元素上，使得該元素顯示的文本值為你綁定的參數。該綁定在顯示或者上非常有用，但是你可以用在任何元素上。 **例子** ~~~ 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"> </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 名稱列表](http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html)。 **依賴性** 除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核心類庫外，無依賴。