KnockoutJS - Enlace visible

Como el nombre lo especifica, esta vinculación hace que el elemento DOM asociado sea visible u oculto según el valor pasado en la vinculación.

Sintaxis

visible: <binding-condition>

Parámetros

Cuando el parámetro se transforma en un valor similar a falso (como booleano falso, 0, nulo o indefinido), los conjuntos de enlaces muestran: none para yourElement.style.display, lo que lo oculta. A esto se le da más prioridad sobre cualquier estilo existente en CSS.
Cuando el parámetro se transforma en un valor similar a verdadero (como un objeto o matriz booleano verdadero o no nulo), el enlace elimina el valor de yourElement.style.display, haciéndolo visible.
Si se trata de una propiedad observable, el enlace actualizará la visibilidad cada vez que cambie la propiedad. De lo contrario, solo establecerá la visibilidad una vez.
El valor del parámetro también puede ser una función de JavaScript o una expresión de JavaScript arbitraria que devuelve un valor booleano. El elemento DOM se hace visible u oculto según la salida.

Ejemplo

Echemos un vistazo al siguiente ejemplo.

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

Salida

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

Guarde el código anterior en visible-bind.htm archivo.
Abra este archivo HTML en un navegador.

↰ Previous page