KnockoutJS - if 绑定

此绑定允许您有条件地呈现数据。如果指定的条件为真，则显示数据，否则不显示。

if 绑定类似于 visible 绑定。区别在于，在 visible 绑定中，底层 HTML 标记实际上保留在 DOM 中，并根据条件使其可见，而在 if 绑定中，HTML 标记根据条件从 DOM 中添加或删除。

语法

if: <binding-condition>

参数

参数是要评估的条件。如果条件评估为真或类似真的值，则处理给定的 HTML 标记。否则，它将从 DOM 中删除。
如果参数中的条件包含可观察量，则每当可观察量发生变化时，都会重新评估条件。相应地，相关标记将根据条件结果添加或删除。

示例

让我们看一下以下示例，它演示了 if 绑定的用法。

实时演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS if 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 = "if: $data.price > 100 ">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-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
此示例将填充第三列，该列根据价格讨论产品的性质（昂贵与否）。请注意，使用 $data 绑定上下文访问单个属性。

观察结果

无容器 if

可能存在无法将数据绑定放置在 DOM 元素内部的情况。仍然可以借助以下所示的基于注释标签的无容器语法执行必要的检查。

和  充当起始和结束标记，使其成为虚拟语法，并将数据绑定为好像它是一个真实的容器。

示例

让我们看一下以下示例，它演示了无容器语法的用法。

实时演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS if binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <ul>
         <li>Monday</li>
         <li>Tuesday</li>
         <li>Wednesday</li>
         <li>Thursday</li>
         <li>Friday</li>
         <!-- ko {if: weekend} -->
         <li>Saturday - check if it is weekend.</li>
         <li>Sunday</li>
         <!-- /ko -->
      </ul>
      
      <script>
         function AppViewModel() {
            this.weekend = false;
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看以上代码是如何工作的：

将以上代码保存到 if-container-less.htm 文件中。
在浏览器中打开此 HTML 文件。

knockoutjs_declarative_bindings.htm

打印页面