KnockoutJS - CSS 繫結

此繫結允許你根據特定條件來定義 HTML DOM 元素的 CSS 類。如果你需要根據某個情況突出顯示某些資料，這將非常有用。

語法

css: <binding-object>

引數

對於靜態 CSS 繫結，該引數可以是 JavaScript 物件形式，包含屬性及其值。
- 此處的屬性是指要應用的 CSS 類，而值可以是布林值 true 或 false，或 JavaScript 表示式或函式。
- 類還可以使用計算的可觀察物件函式動態應用。
還可以同時應用多個 CSS 類。以下是向繫結中新增 2 個類的示例。

<div data-bind = "css: { 
   outOfStock : productStock() === 0, 
   discountAvailable: discount 
}">

類名也可以用單引號指定，例如 'discount Available'。
0 和 null 會被視為 false 值。數字和其他物件會被視為 true 值。
如果 ViewModel 屬性是可觀察物件，則 CSS 類會根據新的已更新引數值確定。如果不是可觀察物件值，則類只會在第一次時確定一次。

示例

讓我們來看看以下示例，它演示了 CSS 繫結的使用。

即時演示

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

      <script>
         function AppViewModel() {
            this.productStock = ko.observable(0);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上述程式碼如何執行 −

將上述程式碼儲存到css-bind.htm 檔案中。
在此瀏覽器中開啟此 HTML 檔案。
當 productStock 屬性大於 0 時，產品資訊會以正常方式顯示。一旦 productStock 變為 0，產品資訊就會變成紅色和粗體。

knockoutjs_declarative_bindings.htm

列印頁面

上一個

下一個