KnockoutJS - 如果不绑定

如果没有绑定就是 if 绑定的否定。它只是 if 绑定的另一种形式。

语法

ifnot: <binding-condition>

参数

参数是您要检查的条件。如果该条件评估为真或类真值，那么将处理给定的 HTML 标记。否则，它将从 DOM 中删除。
如果参数中的条件包含可观察值，那么无论何时可观察值发生更改，都会重新评估条件。相应地，将根据条件结果添加或删除相关标记。

示例

让我们来看一个展示如何使用 ifnot 绑定的示例。

现场演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS ifnot binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p><strong>Product details</strong></p>
      
      <table border = "1">
         <thead>
            <th>Product Name</th><th>Price</th><th>Nature</th>
         </thead>
         
         <tbody data-bind = "foreach: productArray ">
            <tr>
               <td><span data-bind = "text: productName"></span></td>
               <td><span data-bind = "text: price"></span></td>
               <td data-bind = "ifnot: $data.price < 200 ">Expensive</td>
            </tr>
         </tbody>
      </table>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray([
               {productName: 'Milk', price: 100},
               {productName: 'Oil', price: 10},
               {productName: 'Shampoo', price: 1200}
            ]);
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤，了解上面的代码是如何工作的 −

将上述代码保存到if-not-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
此示例将根据价格填充第三列，该列说明产品性质（昂贵或不昂贵）。请注意，使用 $data 绑定上下文访问单个属性。

knockoutjs_declarative_bindings.htm

打印页面

上一个

下一个