> Manuales > Manual de Handlebars

Explicaciones de Handlebars, un sistema de plantillas Javascript que te ahorrará mucho tiempo al generar código HTML a partir de objetos JSON.

En este artículo te vamos a poner manos a la obra con HandlebarsJS y ahorrarte muchas líneas de código Javascript o jQuery, que puede llegar a ser bastante enrevesado y de difícil mantenimiento. Si te dedicas a la programación front-end, debes invertir una rato con nosotros leyendo estas líneas.

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Está basado en la sintaxis de "Mustache Templates", a las que han agregado algunas funcionalidades extra.

Nota: este artículo está realizado a raíz del programa #jQueryIO emitido recientemente, en el que Eduard Tomàs nos presentó Handlebars y nos mostró varios ejemplos de su uso. No es una transcripción directa, pero todas las explicaciones están basadas en las que nos ofreció Edu. Los ejemplos que vamos a ver son los que el propio ponente nos presentó durante su exposición.

El primer paso para entender qué es Handlebars y por qué nos resultará de utilidad es entender qué son los sistemas de plantillas de Javascript.

Cómo funciona Handlebars

Estas herramientas nos pueden ayudar de manera especial cuando consumimos datos que provienen de algún sistema en formato JSON. Tú tendrás un HTML de la plantilla, sencillo, simplemente con las etiquetas de la estructura que quieres generar y por medio de Handlebars llamas a la plantilla, enviándole los datos JSON y obtendrás directamente el HTML con los datos ya cargados.

Además, en las plantillas podrás tener estructuras sencillas como bloques condicionales, iteradores que recorran colecciones, etc. Veremos que todo ello es sencillo porque Handlebars es una librería con funciones limitadas, útiles, pero bastante restringidas al propósito único de generar HTML a partir de objetos JSON.

La operativa normal con Handlebars es la siguiente:

Cargar una plantilla en Handlebars:

La forma habitual de almacenar un template será en un bloque de script en el que meteremos un type que no corresponda con ningún otro conocido. Nos recomiendan usar type="text/x-handlebars-template", pero en realidad podemos colocar el que queramos. Lo que conseguimos así es que ese script se incluya en el DOM, pero los navegadores no intentarán parsearlo, ni ejecutarlo ni nada de eso.

Nota: Se debe pensar en que, si se intenta ejecutar un template Handlebars con Javascript se encontrará con un error, ya que el template está escrito en código HTML. Por ello se coloca un type a la etiqueta Script que el navegador no conozca, de modo que nos aseguremos que no va a intentar ejecutarlo.

La otra opción es usar una llamada a AJAX para traerte los templates, con la única limitación que se debe sincronizar el retorno de la llamada con la compilación y ejecución de los templates. En otras palabras, debemos esperar que la llamada a AJAX para traerte el template se ha producido con éxito para poder compilar llas plantillas que vamos a usar en nuestra página.

Compilar un template:

En Handlebars tenemos que hacer un paso previo antes de poder ejecutar un template, que es compilarlo. Es algo muy simple. Llamamos a Handlebars.compile() enviándole como parámetro el texto de nuestra plantilla. El resultado de esto es una función, que es la que tendremos que invocar para ejecutarla.

var tmpl = Handlebars.compile(stemplate);

La variable "stemplate" es la cadena con el contenido del template. Finalmente, una vez compilada, en la variable que recibimos como retorno, que hemos llamado tmpl, tendrás la función de la plantilla.

Ejecutar un template Handlebars:

Una vez tenemos la función del template, que es lo que obtenemos como retorno después de su compilación, podemos invocarla pasando un único argumento, que es el objeto JSON que queremos usar para cargar los datos en el template.

Obtenemos como respuesta de la función del template un código HTML listo para ser insertado en el DOM.

var html = tmpl(ctx);

Ese HTML es el que podremos usar más tarde para insertar en la página.

Nota: Los templates los compilamos una única vez y los ejecutamos tantas veces como queramos. El proceso costoso en tiempo de ejecución es compilar los templates. Una vez se ha hecho ejecutar el template para producir el HTML es un proceso rápido que podemos realizar tantas veces como necesitemos sin tener que sufrir por el rendimiento de la aplicación.

Primer ejemplo de uso de Handlebars

Podemos ver ahora un primer ejemplo de uso de HandlebarsJS, en el que se crea una plantilla simple, con este aspecto:

<script type="text/x-handlebars-template" id="template">
{{# each Beers}}
Name: {{Name}} <br />
{{/each}}
</script>

Luego explicaremos las estructuras de control para las plantillas, pero podrás apreciar aquí una iteración en la que se recorre una estructura llamada "Beers" y se va mostrando su dato "Name".

Así nos traemos el código de la plantilla:

var stemplate = $("#template").html();
Nota: aquí ves el método html() de jQuery, pero no quiere decir que Handlebars use jQuery de manera única, lo podemos usar con cualquier librería que deseemos. A lo largo de este ejemplo se usa jQuery diversas veces.

Luego compilamos la plantilla:

var tmpl = Handlebars.compile(stemplate);

Ahora podríamos traernos nuestro JSON por medio de AJAX. De nuevo, usaremos la librería que deseemos. Con la cadena JSON recibida simplemente le aplicamos un contexto:

var ctx = {};
ctx.Beers = data; //data es el JSON que he recibido

Y por fin ejecutamos nuestra plantilla, enviando ese JSON.

html = tmpl(ctx);

Acabamos añadiendo el contenido por medio de cualquier librería Javascript. En jQuery usaríamos unas líneas de código como estas:

$("#content").append(html);
$("#content").show();

El JSON que recibo

Tu JSON puede venirte de cualquier lugar, de tu backend, de una Rest-API que te hayas hecho tú mismo o de cualquier "Web Service" que te entregue datos en JSON.

A lo largo de los siguientes ejemplos nuestro JSON será siempre el mismo:

[{"Name":"Estrella","Brewery":"Damm","Style":"Euro Lager","Abv":"5.4","Ibu":"25","Favorite":false,"LastCheckin":{"When":"24/04/2013 - 20:00:01","Drinker":"@eiximenis"}},
{"Name":"Voll Damm","Brewery":"Damm","Style":"Bock","Abv":"7.2","Ibu":"40","Favorite":false,"LastCheckin":{"When":"24/04/2013 - 21:00:01","Drinker":"@CKGrafico"}},
{"Name":"Devil's","Brewery":"Marina","Style":"Indian Pale Ale","Abv":"9.0","Ibu":"150","Favorite":true,"LastCheckin":{"When":"24/04/2013 - 22:00:01","Drinker":"@midesweb"}},
{"Name":"Guinness Draught","Brewery":"Guinness","Style":"Irish Stout","Abv":"4.5","Ibu":"40","Favorite":true,"LastCheckin":{"When":"24/04/2013 - 23:00:01","Drinker":"@eiximenis"}}]

Puedes ver el código completo de este primer ejemplo a continuación:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beer List</title>
<link href="Site.css" rel="stylesheet" />
<script src="handlebars.js"></script>
<script src="jquery-2.0.0.min.js"></script>

<script type="text/x-handlebars-template" id="template">
{{# each Beers}}
Name: {{Name}} <br />
{{/each}}
</script>
</head>
<body>
<div id="content" style="display:none;">
<strong>Our Beers...</strong><br/>

</div>
<script type="text/javascript">
$(function() {
var stemplate = $("#template").html();
var tmpl = Handlebars.compile(stemplate);
var xhr = $.ajax({
url: '/api/Beers'
});

xhr.done(function (data) {
var ctx = {};
ctx.Beers = data;
var html = tmpl(ctx);
$("#content").append(html);
$("#content").show();
});
});


</script> 

</body>
</html>

En el siguiente artículo exploraremos cómo son las plantillas de Handlebars, su sintaxis, posibilidades, etc.

Eduard Tomàs

Apasionado de la informática, los videojuegos, rol y... la cerveza. Key Consulta...

Manual