KnockoutJS - Se vincolante

Questa associazione consente di presentare in modo condizionale. Se la condizione specificata è vera, mostra i dati, altrimenti non mostrare.

if l'associazione è simile a visiblerilegatura. La differenza è che nel binding visibile il markup HTML sottostante rimane effettivamente su DOM e viene reso visibile in base alla condizione mentre inif binding, il markup HTML viene aggiunto o rimosso dal DOM in base alla condizione.

Syntax

if: <binding-condition>

Parameters

  • Il parametro è una condizione che vuoi valutare. 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.

Example

Diamo un'occhiata al seguente esempio che dimostra l'uso di 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

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

  • Salva il codice sopra in formato if-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.

Osservazioni

Senza contenitore se

Potrebbe esserci una situazione in cui non è possibile inserire l'associazione dati all'interno di un elemento DOM. Il controllo essenziale può ancora essere eseguito con l'aiuto dicontainer-less sintassi basata sui tag di commento mostrati di seguito.

<! - ko -> e <! - / ko -> funzionano come marcatori di inizio e fine rendendola una sintassi virtuale e vincolano i dati come se fosse un vero contenitore.

Example

Diamo uno sguardo al seguente esempio che dimostra l'uso della sintassi senza contenitore.

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

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

  • Salva il codice sopra in formato if-container-less.htm file.

  • Apri questo file HTML in un browser.