Introducción a Knockout (IV) - El uso de if, ifnot y visible

Hoy seguiremos con la explicación del funcionamiento básico de knockout. Está vez le tocará el turno al binding visible y veremos como controlar el flujo de la presentación mediante el uso de if o ifnot.

Bien, el propósito del binding visible es mostrar u ocultar un elemento DOM en base a un valor, y como veremos a continuación su funcionamiento es muy simple:

<h3>Listado de libros</h3>
<ul data-bind="foreach: libros, visible: mostrar">
 <li data-bind="text: $data"></li>
</ul>
<input type="checkbox" data-bind="checked: mostrar" /> Mostrar

<script type="text/javascript" language="javascript">
 function ViewModel() {
  var self = this;

  self.libros = ko.observableArray(["Introducing Microsoft Sql Server 2012",
   "Introducing Windows Server 2008 R2",
   "Visual Studio 2010", 
   "Programming Windows Phone7"]);

  self.mostrar = ko.observable(true)
 }
 ko.applyBindings(new ViewModel()); 
</script>

Podemos ver su funcionamiento aquí.

Como vemos, establecemos un checkbox que nos indicará si debemos mostrar la lista de elementos o no. Mediante el dababind checked actualizamos el valor del función observable mostrar, que a su vez, cambiará el estado del listado (ul). Si vemos el código html veremos que se añade display:none al estilo del ul cuando desmarcamos el checkbox.

El funcionamiento de if es similar al del databind visible. La principal diferencia es que mientras visible muestra u oculta en base al css, el databind if elimina los nodos que no serán visible del árbol html.

Modificando un poco nuestro ejemplo anterior ya que no podemos usar el databind forech e if en el mismo elemento veremos como funciona el databind if

<h3>Listado de libros</h3>
<div data-bind="if: mostrar">
 <ul data-bind="foreach: libros">
  <li data-bind="text: $data"></li>
 </ul>
</div>
<input type="checkbox" data-bind="checked: mostrar" /> Mostrar

<script type="text/javascript" language="javascript">
 function ViewModel() {
  var self = this;

  self.libros = ko.observableArray(["Introducing Microsoft Sql Server 2012",
   "Introducing Windows Server 2008 R2",
   "Visual Studio 2010", 
   "Programming Windows Phone7"]);

  self.mostrar = ko.observable(true)
 }
 ko.applyBindings(new ViewModel()); 
</script>

Podemos ver el ejemplo anterior funcionando aquí

Si vemos el código html del ejemplo anterior veremos esto cuando el checkbox está desmarcado

Como vemos es muy fácil modificar el aspecto de nuestra presentación usando los databind visible e if dotando a nuestra interfaz de una mayor dinamismo.

Happy coding!