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

打印页面