KnockoutJS - Si es vinculante

Este enlace le permite presentar condicionalmente. Si la condición especificada es verdadera, muestre los datos; de lo contrario, no los muestre.

if la unión es similar a visibleUnión. La diferencia es que, en el enlace visible, el marcado HTML subyacente en realidad permanece en DOM y se hace visible según la condición, mientras que enif vinculante, el marcado HTML se agrega o elimina del DOM según la condición.

Syntax

if: <binding-condition>

Parameters

El parámetro es una condición que desea evaluar. Si la condición se evalúa como un valor verdadero o similar a verdadero, se procesará el marcado HTML proporcionado. De lo contrario, se eliminará de DOM.
Si la condición en el parámetro contiene un valor observable, entonces la condición se reevalúa siempre que cambie el valor observable. En consecuencia, el marcado relacionado se agregará o eliminará según el resultado de la condición.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de if vinculante.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en if-bind.htm archivo.
Abra este archivo HTML en un navegador.
Este ejemplo llenará la tercera columna que habla sobre la naturaleza de los productos (caros o no) dependiendo del precio. Tenga en cuenta que se accede a la propiedad individual mediante el contexto de enlace de datos $.

Observaciones

Sin contenedor si

Puede haber una situación en la que no sea posible colocar el enlace de datos dentro de un elemento DOM. La verificación esencial aún se puede realizar con la ayuda decontainer-less sintaxis basada en las etiquetas de comentario que se muestran a continuación.

<! - ko -> y <! - / ko -> funcionan como marcadores de inicio y fin, lo que lo convierte en una sintaxis virtual y vincula los datos como si fuera un contenedor real.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso de la sintaxis sin contenedor.

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

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código anterior en if-container-less.htm archivo.
Abra este archivo HTML en un navegador.

↰ Previous page