KnockoutJS - 樣式繫結

樣式繫結允許您透過操作元素的 style 屬性而不是應用 CSS 類來將內聯樣式應用於 HTML DOM 元素。由於內聯樣式的緣故，此繫結需要鍵值對。

語法

style: <binding-object>

引數

應將 JavaScript 物件作為引數傳遞，其中屬性名稱指的是 style 屬性，值指的是要應用於元素的所需值。
也可以一次應用多種樣式。假設您的 ViewModel 中有一個 discount 屬性，並且您想新增它，那麼程式碼如下所示：

<div data-bind = "style: { 
   color: productStock() < 0 ? 'red' : 'blue', 
   fontWeight: discount() ? 'bold' : 'normal' 
}>

如果 productStock 不可用，則字型變為紅色。否則，它變為藍色。如果 discount 設定為 true，則“產品詳情”將變為粗體字。否則，它將保持普通字型。

如果 ViewModel 屬性是可觀察的，則根據新的更新引數值應用樣式。如果它不是可觀察的值，則樣式僅在第一次應用一次。

示例

讓我們來看下面的示例，它演示了樣式繫結的用法。

演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS style binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <div data-bind = "style: { color: productStock() < 0 ? 'red' : 'black' }">
         Product Details.
      </div>

      <script type = "text/javascript">
         function AppViewModel() {
            this.productStock = ko.observable(30000) // initially black as positive value
            this.productStock(-10);                  // now changes DIV's contents to red
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   
   </body>
</html>

輸出

讓我們執行以下步驟來檢視上述程式碼是如何工作的：

將上述程式碼儲存到 **style-bind.htm** 檔案中。
在瀏覽器中開啟此 HTML 檔案。
如果 productStock 低於 0，則“產品詳情”變為紅色。否則，如果庫存可用，則變為黑色。

觀察結果

非法的 JavaScript 變數名

CSS 樣式名稱 **font-weight** 在 JavaScript 中不允許使用。改為使用 **fontWeight**（JavaScript 中不允許在變數名中使用連字元）。

點選此處檢視所有 JavaScript 樣式屬性，這些屬性也可在 KO 的官方網站上找到。

knockoutjs_declarative_bindings.htm

列印頁面