KnockoutJS - Si liaison

Cette liaison vous permet de présenter le sous condition. Si la condition spécifiée est vraie, alors afficher les données, sinon ne pas afficher.

if la liaison est similaire à visiblecontraignant. La différence étant que dans la liaison visible, le balisage HTML sous-jacent reste en fait sur DOM et est rendu visible en fonction de la condition alors que dansif liaison, le balisage HTML est ajouté ou supprimé du DOM en fonction de la condition.

Syntax

if: <binding-condition>

Parameters

  • Le paramètre est une condition que vous souhaitez évaluer. 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.

Example

Jetons un coup d'œil à l'exemple suivant qui montre l'utilisation de if binding.

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

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

  • Enregistrez le code ci-dessus dans if-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 $.

Observations

Sans conteneur si

Il peut y avoir une situation où il n'est pas possible de placer une liaison de données dans un élément DOM. La vérification essentielle peut toujours être effectuée à l'aide decontainer-less syntaxe basée sur les balises de commentaire présentées comme suit.

Les <! - ko -> et <! - / ko -> fonctionnent comme des marqueurs de début et de fin, ce qui en fait une syntaxe virtuelle et lie les données comme s'il s'agissait d'un vrai conteneur.

Example

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la syntaxe sans conteneur.

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

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

  • Enregistrez le code ci-dessus dans if-container-less.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.