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

列印頁面