KnockoutJS - Si aucune liaison

Ifnotbinding est la négation de if binding. C'est juste une autre saveur de si contraignant.

Syntaxe

ifnot: <binding-condition>

Paramètres

  • Le paramètre est une condition que vous souhaitez vérifier. Si la condition prend la valeur true ou true, le balisage HTML donné sera traité. Sinon, il sera supprimé du DOM.

  • Si la condition dans le paramètre contient une valeur observable, la condition est réévaluée chaque fois que la valeur observable change. En conséquence, le balisage associé sera ajouté ou supprimé en fonction du résultat de la condition.

Exemple

Jetons un œil à l'exemple suivant qui montre l'utilisation de la liaison 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans if-not-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.

  • Cet exemple remplira la troisième colonne qui parle de la nature des produits (chers ou pas) en fonction du prix. Notez que la propriété individuelle est accessible à l'aide du contexte de liaison de données $.