KnockoutJS-バインドする場合

このバインディングにより、条件付きで表示できます。指定された条件が真の場合、データを表示し、そうでない場合は表示しません。

*if* バインディングは *visible* バインディングに似ています。 違いは、可視バインディングでは、基になるHTMLマークアップが実際にDOMに残り、条件に基づいて表示されるのに対し、 *if* バインディングでは、HTMLマークアップが条件に基づいてDOMに追加または削除されることです。

構文

if: <binding-condition>

パラメーター

パラメーターは、評価する条件です。条件がtrueまたはtrue-like値に評価される場合、指定された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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
この例では、価格に応じて製品の性質（高価かどうか）を説明する3番目の列にデータを入力します。個々のプロパティは、$ dataバインディングコンテキストを使用してアクセスされることに注意してください。

観察

コンテナレスの場合

DOM要素内にデータバインディングを配置できない場合があります。本質的なチェックは、以下に示すコメントタグに基づいた*コンテナレス*構文の助けを借りて実行できます。

<！-ko→および<！-/ko→は、開始および終了マーカーとして機能し、仮想構文となり、データを実際のコンテナであるかのようにバインドします。

例

コンテナなしの構文の使用を示す次の例を見てみましょう。

<!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 ファイルに保存します。
このHTMLファイルをブラウザーで開きます。

Knockoutjs-if-binding

KnockoutJS-バインドする場合

観察

コンテナレスの場合