KnockoutJS-Ifnotバインディング

*Ifnot* バインディングはifバインディングの否定です。 ifバインディングの別のフレーバーです。

構文

ifnot: <binding-condition>

パラメーター

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

Knockoutjs-ifnot-binding

KnockoutJS-Ifnotバインディング

構文

パラメーター

例

出力

目次