KnockoutJS - 样式绑定

更新于 2025/1/16 6:37:17

样式绑定允许您通过操作元素的样式属性而不是应用 CSS 类来将内联样式应用于 HTML DOM 元素。由于内联样式，此绑定需要键值对。

语法

style: <binding-object>

参数

JavaScript 对象应作为参数传递，其中属性名称指的是样式属性，值指的是要应用于元素的所需值。
也可以一次应用多种样式。假设您的 ViewModel 中有一个 discount 属性，并且您想添加它，那么代码将如下所示 −

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

如果产品库存不可用，则字体变为红色。否则，字体变为蓝色。如果折扣设置为 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>