if: <binding-condition>

优质
小牛编辑
132浏览
2023-12-01

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

if绑定类似于visible绑定。 区别在于,在可见绑定中,底层HTML标记实际上保留在DOM上并且基于条件变得可见,而在if绑定中,基于条件在DOM中添加或删除HTML标记。

Syntax

if: <binding-condition>

Parameters

  • 参数是您要评估的条件。 如果条件计算为true或true-like值,则将处理给定的HTML标记。 否则,它将从DOM中删除。

  • 如果参数中的条件包含可观察值,则只要可观察值发生更改,就会重新计算条件。 相应地,将根据条件结果添加或删除相关标记。

Example

让我们看一下以下示例,该示例演示了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>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

  • 将以上代码保存在if-bind.htm文件中。

  • 在浏览器中打开此HTML文件。

  • 这个例子将填充第三列,它根据价格讨论产品的性质(昂贵与否)。 请注意,使用$ data绑定上下文访问单个属性。

观察 (Observations)

Container-less if

可能存在无法在DOM元素中放置数据绑定的情况。 基于如下所示的注释标记,仍然可以在无container-less语法的帮助下执行基本检查。

和用作开始和结束标记,使其成为虚拟语法,并将数据绑定为真正的容器。

Example

让我们看看下面的示例,该示例演示了无容器语法的使用。

<!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>

Output

让我们执行以下步骤来查看上述代码的工作原理 -

  • 将上述代码保存在if-container-less.htm文件中。

  • 在浏览器中打开此HTML文件。