KnockoutJS - If Binding

Essa ligação permite que você apresente o condicionalmente. Se a condição especificada for verdadeira, mostre os dados; caso contrário, não mostre.

if ligação é semelhante a visibleobrigatório. A diferença é que, na vinculação visível, a marcação HTML subjacente realmente permanece no DOM e se torna visível com base na condição, enquanto emif vinculação, a marcação HTML é adicionada ou removida do DOM com base na condição.

Syntax

if: <binding-condition>

Parameters

O parâmetro é uma condição que você deseja avaliar. 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. Da mesma forma, a marcação relacionada será adicionada ou removida com base no resultado da condição.

Example

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

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

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

Salve o código acima em if-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.

Observações

Sem contêiner se

Pode haver uma situação em que não seja possível colocar a vinculação de dados dentro de um elemento DOM. A verificação essencial ainda pode ser realizada com a ajuda decontainer-less sintaxe baseada nas tags de comentário mostradas a seguir.

O <! - ko -> e <! - / ko -> funcionam como marcadores de início e fim, tornando-se uma sintaxe virtual e vinculando os dados como se fossem um contêiner real.

Example

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da sintaxe sem contêiner.

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

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

Salve o código acima em if-container-less.htm Arquivo.
Abra este arquivo HTML em um navegador.

↰ Previous page