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.

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, que no es más que un código HTML mezclado con unos sencillos elementos de control
• Compilar la plantilla, que nos permite convertirlo en una función JS
• Ejecutar la plantilla para obtener la cadena HTML a partir del JSON
• Insertar en el DOM el código HTML resultante de ejecutar el template, usando jQuery o nuestra librería preferida

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.

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.

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();

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.