KnockoutJS - Ifnot Binding

Ifnotbinding è la negazione di if binding. È solo un altro sapore di se vincolante.

Sintassi

ifnot: <binding-condition>

Parametri

  • Il parametro è una condizione che vuoi controllare. Se la condizione restituisce un valore true o true-like, verrà elaborato il markup HTML specificato. Altrimenti, verrà rimosso da DOM.

  • Se la condizione nel parametro contiene un valore osservabile, la condizione viene rivalutata ogni volta che il valore osservabile cambia. Di conseguenza, il markup correlato verrà aggiunto o rimosso in base al risultato della condizione.

Esempio

Diamo uno sguardo al seguente esempio che dimostra l'uso di ifnot binding.

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato if-not-bind.htm file.

  • Apri questo file HTML in un browser.

  • Questo esempio popolerà la terza colonna che parla della natura dei prodotti (costosi o meno) a seconda del prezzo. Si noti che si accede alla singola proprietà utilizzando il contesto $ data binding.