Plantillas Javascript con jQuery.tmpl

Esta semana se ha anunciado el soporte oficial por parte del equipo de jQuery del plugin de plantillas desarrollado por Microsoft, jQuery.tmpl.

Este plugin permite definir plantillas para renderizar contenidos de forma sencilla. Mucho más sencillo que crear marcado HTML por medio de javascript.

Voy a hacer una pequeña introducción demostrativa y para ello voy a ayudarme del código de un artículo anterior, Notificador Ajax usando jQuery.

La miniaplicación de dicho articulo permite mostrar de forma asincrona los últimos mensajes del timeline de TheProc.es en twitter. Para ello utiliza la API de twitter, obteniendo el listado de tweets en formato JSON. En esta ocasión obtendremos los tweets del timeline público.

En el código del ejemplo una vez obtenidos los tweets se añadia el texto de los mismos en un simple div:

$.ajax({
  url: 'http://api.twitter.com/1/statuses/public_timeline.json?count=15&callback=?',
  dataType: 'json',
  success: function(data){
    $('#status').html("");
    $(data).each(function(){
      $('#status').append("<div>"+this.text+"</div>");
    });
  }
});

Si quisieramos un marcado más complejo nos resultaria algo tedioso y más propenso a errores. Crear la estructura a mano, añadir las clases a mano, etc..

Por ejemplo, si quisieramos crear el siguiente marcado para cada tweet:

<div class="tweet">
  <div class="tweet-user-image">
    <img src="" alt="" width="48" height="48" />
  </div>
  <div class="tweet-content">
    <div class="tweet-text"><strong>usuario</strong> texto</div>
    <div class="tweet-meta">fecha</div>
  </div>
  <div class="hr"></div>
</div>

Sería algo así:

$("<div>").addClass("tweet").append(
  $("<div>").addClass("tweet-user-image").append(
    $("<img>").attr({src:"", alt: "", height: 48, width: 48})
  )
).append(...);

Con jQuery.tmpl es sencillo crear una plantilla para cada tweet, por ejemplo:

<script id="tweet" type="text/x-jquery-tmpl">
  <div class="tweet">
    <div class="tweet-user-image">
      <img src="" alt="" width="48" height="48" />
    </div>
    <div class="tweet-content">
      <div class="tweet-text"><strong>usuario</strong> texto</div>
      <div class="tweet-meta">fecha</div>
    </div>
    <div class="hr"></div>
  </div>
</script>

Como se puede ver se crea la plantilla dentro de un elemento <script> (puede crearse tambien como cadena de carácteres si no queremos tenerla definida en el propio HTML) con un id. Utilizamos el id para compilar y renderizar la plantilla con los datos que le pasemos.

$('#tweets').tmpl(datos);

Los datos que pasamos es un objeto JSON. Dicho objeto contendrá una lista de tweets ofrecidos por Twitter con los siguientes datos en su estructura:

[{
  text: "texto del tweet",
  createt_at: "fecha de creacion del tweet",
  user: {
    screen_name: "Nombre corto del usuario",
    profile_image_url: "url de avatar de usuario"
  }
}...]

Accedemos a esas propiedades en la plantilla con el tag ${nombre_de_variable}, por ejemplo ${user.name}, ${text}, etc..

La plantilla para los tweets sería la siguiente:

<script id="tweet" type="text/x-jquery-tmpl">
  <div class="tweet">
    <div class="tweet-user-image">
      <img src="${user.profile_image_url}" alt="${ user.screen_name }" width="48" height="48" />
    </div>
    <div class="tweet-content">
      <div class="tweet-text"><strong>${user.screen_name}</strong> ${text}</div>
      <div class="tweet-meta">${created_at}</div>
    </div>
    <div class="hr"></div>
  </div>
</script>

Para renderizar esta plantilla hariamos lo siguiente:

$('#tweets').tmpl(data).appendTo("#status");

#status es el div donde se mostrarán los tweets.

La llamada ajax quedaría de la siguiente manera:

$.ajax({
    url: 'http://api.twitter.com/1/statuses/public_timeline.json?count=15&callback=?',
    dataType: 'json',
    success: function(data){
      $('#status').html("");
      $("#tweet").tmpl(data).appendTo("#status");
    }
  });

Muy limpio y pontente. Si ahora queremos modificar la plantilla es mucho más sencillo que enredar con métodos y funciones jQuery.