Plantillas Javascript con jQuery.tmpl

Fuente: theproc.es

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("
"+this.text+"
");     });   } }); 

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:

   
usuario texto
     
fecha
   
 
 

Sería algo así:

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

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

Como se puede ver se crea la plantilla dentro de un elemento

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.

Comparte: