KnockoutJS - Ifnot Binding

Ifnotvincular é a negação de se vincular. É apenas mais um sabor de ligação.

Sintaxe

ifnot: <binding-condition>

Parâmetros

O parâmetro é uma condição que você deseja verificar. Se a condição for avaliada como um valor verdadeiro ou semelhante a verdadeiro, a marcação HTML fornecida será processada. Caso contrário, será removido do DOM.
Se a condição no parâmetro contém um valor observável, então a condição é reavaliada sempre que o valor observável muda. Correspondentemente, a marcação relacionada será adicionada ou removida com base no resultado da condição.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da vinculação ifnot.

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

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em if-not-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Este exemplo irá preencher a terceira coluna que fala sobre a natureza dos produtos (caros ou não) dependendo do preço. Observe que a propriedade individual é acessada usando o contexto de ligação $ data.

↰ Previous page