KnockoutJS - Ligação Visível

Como o nome especifica, essa associação faz com que o elemento DOM associado fique visível ou oculto com base no valor passado na associação.

Sintaxe

visible: <binding-condition>

Parâmetros

Quando o parâmetro se transforma em um valor semelhante a falso (como booleano falso ou 0, nulo ou indefinido), os conjuntos de vinculação exibem: nenhum para seuElement.style.display tornando-o oculto. Isso tem mais prioridade sobre qualquer estilo existente em CSS.
Quando o parâmetro se transforma em um valor true-like (como boolean true, ou objeto ou array não nulo), a ligação remove o valor yourElement.style.display, tornando-o visível.
Se esta for uma propriedade observável, a vinculação atualizará a visibilidade sempre que a propriedade for alterada. Caso contrário, ele definirá a visibilidade apenas uma vez.
O valor do parâmetro também pode ser uma função JavaScript ou uma expressão JavaScript arbitrária que retorna um booleano. O elemento DOM torna-se visível ou oculto com base na saída.

Exemplo

Vejamos o exemplo a seguir.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Visible Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>

      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially
         }

         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now
         vm.showMe(true);
      </script>

   </body>
</html>

Resultado

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

Salve o código acima em visible-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.

↰ Previous page