KnockoutJS - Ifnot Binding

Ifnotvinculante es la negación de si vinculante. Es solo otro sabor de if vinculante.

Sintaxis

ifnot: <binding-condition>

Parámetros

El parámetro es una condición que desea verificar. 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.

Ejemplo

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

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

Salida

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

Guarde el código anterior en if-not-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 $.

↰ Previous page