Introducción a Knockout (II) - El uso de for-each y click

En mi anterior artículo hice una pequeña introducción a knockout. Hoy vamos a ver como nos puede ayudar a crear elementos en nuestra interfaz y a su vez interactuar con estos elementos de una manera muy fácil y "elegante".

Para esto tan solo debemos usar el data-bind foreach dado por knockout.Veamos su funcionamiento con el siguiente ejemplo:

<h3>Listado de libros</h3>

<ul data-bind="foreach: libros">
  <li data-bind="text: $data"></li>
</ul>

<script type="text/javascript" language="javascript">
  function ViewModel() {
    var self = this;
  
    self.libros = ko.observableArray([]);

    // Creamos nuestra colección de libros
    var t = ["Introducing Microsoft Sql Server 2012",
      "Introducing Windows Server 2008 R2",
      "Visual Studio 2010", 
      "Programming Windows Phone7"];
    self.libros(t);
  }
  ko.applyBindings(new ViewModel()); 
</script>

Vemos que creamos nuestro <ul> y ahí establecemos el data-bind foreach, sobre una propiedad de nuestro modelo. Esta propiedad está definida como un array sobre el que establecemos un observador para que cada vez que cambie se rehaga nuestro listado. Para ver este comportamiento vamos a utilizar otro data-bind, en este caso usarmos el data-bind click que nos permite interactuar sobre un click en un elemento determinado.

<h3>Listado de libros</h3>
<ul data-bind="foreach: libros">
  <li data-bind="text: $data"></li>
</ul>
<span data-bind="click: recargar" style="cursor: pointer">Recargar lista</span>

<script type="text/javascript" language="javascript">
  function ViewModel() {
    var self = this;
  
    self.libros = ko.observableArray([]);

    // Creamos nuestra colección de libros
    var t = ["Introducing Microsoft Sql Server 2012",
      "Introducing Windows Server 2008 R2",
      "Visual Studio 2010", 
      "Programming Windows Phone7"];
    self.libros(t);

    self.recargar = function () {
      t = ["Visual Studio 2008",
        "Microsoft .NET 4.0",
        "ASP.NET 4.0"];

      self.libros(t);
    }
  }
  ko.applyBindings(new ViewModel());
</script>

En este ejemplo vemos como inicialmente cargamos la lista con 4 títulos y tras hacer click sobre el recargar, ésta se recarga con los tres nuevo libros definidos en el método recargar. Vemos que el código es muy limpio sobre todo en la parte html, y con poco esfuerzo podemos cambiar la función recargar de estática a dinámica haciendo una llamada ajax para obtener datos de nuestro servicio. Puedes probar el ejemplo haciendo click aquí.

Antes la sencillez del código, la pregunta sería, ¿cómo podríamos hacer esto con jQuery? Pues sin ser un experto en jQuery sería algo así

<h3>Listado de libros</h3>
<ul id="libros"></ul>
<span id="recargar" style="cursor: pointer">Recargar lista</span>​

$(document).ready(function() {
    var t = ["Introducing Microsoft Sql Server 2012",
      "Introducing Windows Server 2008 R2",
      "Visual Studio 2010", 
      "Programming Windows Phone7"];
    bind(t);    
    
    $('#recargar').click(function() {
        t = ["Visual Studio 2008",
          "Microsoft .NET 4.0",
          "ASP.NET 4.0"];
        bind(t);
    });
    
    function bind(t)
    {
        $('#libros').empty();
        $.each(t, function(index, item) {
            $('#libros').append('<li>'+item+'</li>');
        });
    }
});​

Puedes probar el ejemplo aquí

Happy codding!