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
打印页面
上一个
下一个
广告