Manual Handlebars PDF

Manual de Handlebars
http://desarrolloweb.com/manuales/manual-handlebars.html Pgina 1 de 25
Introduccin: Manual de Handlebars
Manual de Handlebars, un sencillo sistema de plantillas Javascript basado en Mustache

Templates. Handlebars sirve para generar HTML a partir de objetos con datos en formato
JSON.
Handlebars es un popular sistema de plantillas en Javascript que te permite crear y formatear

cdigo HTML de una manera muy sencilla. En lugar de hacer operaciones tediosas en libreras
como jQuery para tocar el DOM insertando elementos de manera independiente con append o
prepend, te permite crear bloques de cdigo HTML, escritos directamente con HTML que
poblars con datos que te vengan de un JSON. Es tan sencillo como escribir HTML y tan
potente que te permite realizar operaciones de recorrido de estructuras que encontramos en
otros sistemas de plantillas que puedas haber usado.
Los sistemas de plantillas son muy importantes, porque nos permiten separar el cdigo por
responsabilidades y crear la salida de las aplicaciones de una manera sencilla, manteniendo el
cdigo HTML separado del cdigo Javascript. En este manual aprenders a usar el sistema de
plantillas Javascript tanto en el lado del cliente como en el lado del servidor con NodeJS.
Se trata de un complemento esencial para el desarrollo frontend y para la separacin del

frontend/backend, de modo que podamos hacer nuestros desarrollos dinmicos con uso
intensivo de Javascript, generando el HTML en el lado del cliente, con contenido que nos
llegar mediante JSON, probablemente de solicitudes Ajax.
Puedes usar Handlebars junto con cualquier librera de manipulacin del DOM como jQuery, o
simplemente con Javascript plano. Tambin puedes usarla en el lado del servidor, con NodeJS
en el caso que tengas que generar salida formateada desde ese lenguaje.
Encuentras este manual online en:

http://desarrolloweb.com/manuales/manual-handlebars.html
Autores del manual
Las siguientes personas han participado como autores escribiendo artculos de este manual.
Eduard Toms
Apasionado de la informtica, los videojuegos, rol y... la cerveza. Key

Consultant en Pasiona y MVP en #aspnet
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y la plataforma de

formacin online EscuelaIT. Comenz en el mundo del desarrollo web
en el ao 1997, transformando su hobby en su trabajo.
Sistemas de plantillas en Javascript
Qu son los motores de plantillas y cmo nos pueden facilitar la vida a los
programadores en Javascript. Ejemplos de libreras que implementan las
plantillas.
Si pensabas que las plantillas eran algo ligado al back-end es que todava tienes bastante que
explorar en cuanto a desarrollo del lado del cliente. En este artculo pretendemos explicar qu
son las plantillas Javascript, de modo que podamos entender su utilidad y cmo pueden llegar
a ser esenciales para una programacin front-end sencilla y mantenible.
Creo que lo mejor para entender la necesidad de usar plantillas en Javascript es haberse visto
en el quebradero de cabeza en que nos encontramos cuando queremos generar dinmicamente
elementos en el DOM de la pgina web. As que comenzaremos explicando sus ventajas con un
ejemplo en el que podemos habernos encontrado.
Por qu plantillas en Javascript

Si usas jQuery, sabrs que puedes insertar cdigo HTML en la pgina con los mtodos
append(), appendTo(), prepend(), etc. Insertar algo sencillo como un enlace o una imagen no
te dar mucho trabajo, pero si se trata de estructuras complejas de cdigo HTML, habrs
encontrado que no es tan prctico. Si has pasado por ah, habrs padecido un mogolln de
llamadas a esos mtodos, invocadas en cadena, que resultan difciles de programar y todava
ms complejas de entender a simple vista y de mantener con el tiempo.
No sera mejor mantener esas estructuras en HTML plano y simplemente llamar a una
funcin que nos cargue los datos enviados dentro del cdigo HTML? Pues eso es bsicamente
lo que conseguimos con las plantillas.
No hay mucho secreto. Nuestra plantilla tendra un aspecto como este cdigo HTML:
<div class="estructura">
<h1>{{titulo}}</h1>
<div class="cuerpo">
{{cuerpo}}
</div>
</div>
Nota: Esa plantilla est basada en la sintaxis Mustache Templates, que utiliza la librera
Handlebars JS.
Como ves, hay bloques de contenido que se pueden rellenar con datos variables, son los
{{titulo}} y {{body}}. Pues nada ms tendramos que invocar a esa plantilla enviando los datos
que queremos cargar en el HTML y nos devolver el cdigo HTML resultante, ya con los datos
dentro de las etiquetas, en una cadena que podramos insertar en el DOM de una manera
sencillsima con nuestra librera Javascript preferida, ya sea jQuery o con cualquier otra.
Por supuesto, si maana queremos modificar la plantilla, agregando etiquetas, cambiando la

estructura o jerarqua, simplemente tendramos que modificar la plantilla, tal como si fuera un
HTML normal y el Javascript permanecera intacto. Vamos, una maravilla!
Nos queda en el aire ver cmo sera el sistema para ejecutar la plantilla, pero realmente esa
implementacin depende del sistema de plantillas que ests utilizando, aunque generalmente
ser algo tan sencillo como ejecutar un mtodo o una funcin.
Nota: Qu tal, se entiende bien la estructura del HTML de la plantilla a simple vista? Si
todava no te resulta obvio lo til de mantener las plantillas en HTML, echa un vistazo al
cdigo Javascript siguiente. Algo como esto sera lo que tendramos que escribir usando
jQuery para crear esa estructura HTML como la de la plantilla anterior:
$("<div></div>")
.addClass("estructura")
.append("<h1>" + titulo + "</h1>")
.append($("<div></div>")
.html(cuerpo)
.addClass("cuerpo"))
.appendTo("body");
Como se puede ver, construir estructuras DOM desde jQuery no es muy prctico, y aunque
se pueda hacer perfectamente, no resulta cmodo.
Cmo funcionan los motores de plantillas

El paradigma de desarrollo del lado del cliente est cambiando y estas libreras son una
muestra de ello. Cada vez ms en el front-end consumimos ms lo que se llaman "rest-api",
que te ofrecen datos que vienen del back-end en formato de texto, generalmente en notacin
JSON. Pues estas libreras de plantillas lo que te ofrecen es pasar rpidamente de esos JSON a
pedazos de cdigo HTML que puedes insertar cmodamente en el DOM de la pgina.
En general, todos los sistemas funcionan de la misma manera. En tu aplicacin tendrs un

HTML pequeo y por medio de llamadas a AJAX invocas al back-end, te traes un objeto en
JSON, lo "des-serializas" y lo transformas en un objeto Javascript, lo manipulas en el cliente y
por ltimo lo conviertes en HTML por medio de una plantilla.
Los sistemas de plantillas son adems compaeros inseparables de algunas libreras avanzadas
Javascript que nos traen paradigmas de desarrollo diferentes, como los MVVM, que sera algo
parecido al MVC pero para desarrollo en el cliente. En los ltimos meses se ha hablado mucho
de AngularJS, que ya viene con su propio sistema de plantillas. Pero otras, como por ejemplo
Backbone no implementan su propio sistema de templating, de modo que cualquiera de las
siguientes libreras Javascript te vendr ideal.
Nota: la diferencia de un sistema de plantillas como los que mencionaremos a

continuacin y los comentados MVVM, es que las plantillas estas son unidireccionales. A
partir de un JSON creas un HTML que puedes insertar en el DOM y ya est. Sin embargo,
los MVVM como BackboneJS o knockoutJS son bidireccionales y establecen enlaces
"vivos", de modo que cuando modificas unas cosas automticamente, se modifican otras.
Relacin de los principales sistemas de plantillas en Javascript

Existen diversos sistemas de plantillas en Javascript que puedes usar a tu voluntad. A
continuacin tenemos una lista de las principales libreras Javascript que tendremos a nuestra
disposicin si queremos implementar la herramienta de plantillas y comenzar a disfrutar de las
utilidades que nos facilitan.
Handlebars:
Un motor de plantillas para Javascript que implementa la sintaxis Mustache Templates y que
provee de funcionalidades adicionales para su compilacin y procesamiento.
handlebarsjs.com
Underscore.js:
Una librera Javascript que provee un gran abanico de funcionalidades diversas y tiles para
cualquier proyecto. Entre otras cosas podrs generar y usar plantillas Javascript.
underscorejs.org
Pure:
Sistema de plantillas ultra-rpida para generar HTML a partir de objetos JSON.
beebole.com/pure
jsrender:
La siguiente generacin de plantillas jQuery, optimizadas para un alto rendimiento.
github.com/BorisMoore/jsrender
En general, podramos nombrar algunas otras libreras, pero estas son las que actualmente
mejor pinta tienen. En la actualidad todo depende de tus preferencias, ya que en Javascript
existen decenas de libreras para resolver las mismas cosas. Todo ser ver la que al final acaba
teniendo mayor penetracin.
En el prximo artculo explicaremos uno de estos motores de plantillas Javascript,

Handlebars, ofreciendo ejemplos sobre sus capacidades y la manera de implementarlas.
Este artculo es obra de Eduard Toms

Fue publicado por primera vez en 20/05/2013
Disponible online en http://desarrolloweb.com/articulos/sistemas-plantillas-
javascript.html
Plantillas Javascript con Handlebars
Explicaciones de Handlebars, un sistema de plantillas Javascript que te ahorrar

mucho tiempo al generar cdigo HTML a partir de objetos JSON.
En este artculo te vamos a poner manos a la obra con HandlebarsJS y ahorrarte muchas lneas
de cdigo Javascript o jQuery, que puede llegar a ser bastante enrevesado y de difcil
mantenimiento. Si te dedicas a la programacin front-end, debes invertir una rato con
nosotros leyendo estas lneas.
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 artculo est realizado a raz del programa #jQueryIO emitido recientemente, en
el que Eduard Toms nos present Handlebars y nos mostr varios ejemplos de su uso. No
es una transcripcin directa, pero todas las explicaciones estn basadas en las que nos
ofreci Edu. Los ejemplos que vamos a ver son los que el propio ponente nos present
durante su exposicin.
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.
Cmo funciona Handlebars

Estas herramientas nos pueden ayudar de manera especial cuando consumimos datos que
provienen de algn sistema en formato JSON. T tendrs 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, envindole los datos JSON y obtendrs directamente el HTML con los
datos ya cargados.
Adems, en las plantillas podrs tener estructuras sencillas como bloques condicionales,
iteradores que recorran colecciones, etc. Veremos que todo ello es sencillo porque Handlebars
es una librera con funciones limitadas, tiles, pero bastante restringidas al propsito nico de
generar HTML a partir de objetos JSON.
La operativa normal con Handlebars es la siguiente:
Cargar una plantilla, que no es ms que un cdigo HTML mezclado con unos sencillos
elementos de control
Compilar la plantilla, que nos permite convertirlo en una funcin JS
Ejecutar la plantilla para obtener la cadena HTML a partir del JSON
Insertar en el DOM el cdigo HTML resultante de ejecutar el template, usando jQuery o
nuestra librera 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 ningn 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 intentarn
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 cdigo 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 opcin es usar una llamada a AJAX para traerte los templates, con la nica limitacin
que se debe sincronizar el retorno de la llamada con la compilacin y ejecucin 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
pgina.
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() envindole como
parmetro el texto de nuestra plantilla. El resultado de esto es una funcin, 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, tendrs la
funcin de la plantilla.
Ejecutar un template Handlebars:

Una vez tenemos la funcin del template, que es lo que obtenemos como retorno despus de su
compilacin, 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 funcin del template un cdigo HTML listo para ser
insertado en el DOM.
var html = tmpl(ctx);
Ese HTML es el que podremos usar ms tarde para insertar en la pgina.
Nota: Los templates los compilamos una nica vez y los ejecutamos tantas veces como
queramos. El proceso costoso en tiempo de ejecucin es compilar los templates. Una vez se
ha hecho ejecutar el template para producir el HTML es un proceso rpido que podemos
realizar tantas veces como necesitemos sin tener que sufrir por el rendimiento de la
aplicacin.
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 podrs apreciar aqu
una iteracin en la que se recorre una estructura llamada "Beers" y se va mostrando su dato
"Name".
As nos traemos el cdigo de la plantilla:
var stemplate = $("#template").html();
Nota: aqu ves el mtodo html() de jQuery, pero no quiere decir que Handlebars use
jQuery de manera nica, lo podemos usar con cualquier librera que deseemos. A lo largo
de este ejemplo se usa jQuery diversas veces.
Luego compilamos la plantilla:
Ahora podramos traernos nuestro JSON por medio de AJAX. De nuevo, usaremos la librera
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 aadiendo el contenido por medio de cualquier librera Javascript. En jQuery

usaramos unas lneas de cdigo 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 cdigo completo de este primer ejemplo a continuacin:
<!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>
{{# 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 xhr = $.ajax({
url: '/api/Beers'
});
xhr.done(function (data) {
var ctx = {};
ctx.Beers = data;
});
});
</script>
</body>
</html>
En el siguiente artculo exploraremos cmo son las plantillas de Handlebars, su sintaxis,

posibilidades, etc.

Disponible online en http://desarrolloweb.com/articulos/plantillas-javascript-
handlebars.html
Cmo son las plantillas Handlebars
Estudio del sistema de plantillas Javascript Handlebars, anlisis de las

posibilidades de las plantillas, sintaxis, estructuras de control, tutorial, etc.
En los artculos anteriores del Manual de Handlebars hemos podido conocer qu nos ofrecen
los sistemas de plantillas Javascript y cmo dar los primeros pasos con Handlebars. Ahora
vamos a estudiar ms de cerca esta librera de plantillas Javascript para entender su
funcionamiento.
Comenzamos por observar en las plantillas los bloques delimitados por {{ }} dos llaves de
inicio y dos llaves de cierre. Esa forma de abrir y cerrar un bloque en la plantilla es la que da
nombre a la sintaxis que utiliza "Mustache".
Insertar valores en las plantillas

Los valores simples se insertan el en cdigo HTML de una plantilla comenzando por {{ y
terminando por }}.
{{valor}}
Aunque tambin se pueden usar tres llaves a la vez, en cuyo caso no escapar el cdigo HTML
que haya en el valor.
{{{valor}}}
Insertar expresiones de bloque

Los bloques permiten escribir algunas estructuras de control sencillas, como bucles. Su
sintaxis es simuilar a los datos, pero utiizamos adems una "#" para abrir el bloque y "/" para
terminarlo.
{{# each Beers}} ... {{/each}}
Esto nos va a permitir ejecutar templates en un contexto distinto al del original. Luego lo
veremos exactamente. Entre los bloques disponibles tememos:
each {{# each expresion}} Itera sobre cada elemento de expresin y genera el template
asociado. El elemento por el que se itera pasa a ser el nuevo contexto.
if {{if expresion}} Si expresion devuelve false, undefined, "", null o [] NO renderiza el
bloque. Admite {{else}}.
Unless {{#unless expresion}} esto, al contrario que if, renderiza el bloque si expresion
devuelve false, undefined, null, "" o [].
Las propiedades del objeto JSON son perfectamente navegables, accediendo al nombre
{{name}}, pero tambin a compuestas en notacin de objeto, como {{author.name}}. Incluso
podemos hacer el paso contrario e irnos al contexto padre con {{../name}}, siendo "name" una
propiedad encontrada en el contexto padre.
Helpers en Handlebars
Tambin tenemos disponible la figura de los "Helpers", que nos ayudan a registrar nuestras
propias funciones para hacer cosas ms concretas y repetitivas. Podemos entender los helpers
como una extensin del propio sistema de plantillas Handlebars, y son como funciones que se
pueden referenciar desde cualquier template. Permiten ejecutar cdigo para dar mayor
funcionalidad a las plantillas y as modificar/combinar datos del contexto.
{{fullName author}} invoca al helper fullName pasndole la propiedad author del contexto.
Se registran y se crean helpers propios con Handlebars.registerHelper(), con cdigo como el

siguiente:
Handlebars.registerHelper('Italize', function (value) {
return new Handlebars.SafeString("<em>" + value + "</em>");
})
Para crear un helper siempre usamos el mtodo "registerHelper", indicando como primer
parmetro el nombre del helper, seguido de un segundo parmetro que es la funcin del helper
propiamente dicho. En esa funcin recibimos adems datos que podemos usar dentro del
cdigo del helper y cuyos valores le pasamos desde el cdigo de la plantilla.
Nota: el mtodo "SafeString()" es de Handlebars y lo que hace es decirle a la librera que el

cdigo HTML que hemos colocado es seguro y que no necesita escaparlo para que se
rendericen las etiquetas que contiene. Si no devuelvo por medio de la funcin SafeString(),
handlebars entendera que las etiquetas son texto y nos las mostara escapadas, de modo
que se veran en la pgina.
Por ejemplo, el helper anterior llamado "Italize" se podra invocar desde la plantilla con el
siguiente cdigo:
{{# each Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} <br />
{{/each}}
Nota: en este caso el helper Italize simplemente cambia a cursiva un texto y no sera muy
necesario implementar por medio de un helper. Podra venirnos bien si ms adelante todos
los "Italize" los queremos mostrar de una manera especial y que solo tengamos que
modificar para ello el cdigo del helper, pero generalmente lo usaremos para alguna
estructura un poco ms compleja.
Podemos ver el cdigo fuente del ejemplo segundo de Handlebars, que hace uso del anterior
helper.
!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>
{{# each Beers}}
{{/each}}
</script>
</head>
<body>
<div id="content" style="display:none;">
<strong>Our Beers...</strong><br/>
</div>
<script type="text/javascript">
(function() {
Handlebars.registerHelper('Italize', function (value) {
return new Handlebars.SafeString(
"<em>" + value + "</em>");
});
})();
$(function() {
var xhr = $.ajax({
url: '/api/Beers'
});
xhr.done(function (data) {
var ctx = {};
ctx.Beers = data;
});
});
</script>
</body>
</html>
Si te fijas en el cdigo fuente del ejemplo del artculo anterior de este manual, encontrars que
el Javascript que usamos para compilar la plantilla, invocar al backend para traernos por
AJAX el JSON y ejecutar la plantilla, es muy parecido. Realmente esto es normal, porque todo
ese proceso no variar apenas en los distintos ejemplos que hagamos. Lo que encontrars que
varan son las plantillas y los helpers que podamos construir.
Recuerda que el JSON es el mismo en todos los ejercicios que hemos realizado sobre
Handlebars y que lo puedes ver en:
www.desarrolloweb.com/articulos/ejemplos/handlebars/Beers.json
Ejemplo con bloque IF

Ahora podemos ver cmo sera una plantilla que tiene un bloque "if", para mostrar solamente
los contenidos que tengan unas caratersticas.
{{# each Beers}}
{{# if Favorite}}
{{/if}}
{{/each}}
Con esto conseguimos que solo se impriman aquellas cervezas que se han maracado como
"Favorite".
Ejemplo de helper ms elaborado

En nuestro trabajo con helpers encontaremos casi siempre casos ms claros donde el uso de
estas funciones nos ahorrarn ms cdigo. Por ejemplo, a partir de un boleano podemos
mostrar un icono que simbolice cierto estado.
Handlebars.registerHelper('ShowStar', function (value) {
if (value) {
return new Handlebars.SafeString("<img src='favorite.png' alt='i love this beer!'/>");
} else
return "";
});
En este Helper se usa el parmetro "value" para cargar datos que ser un boleano en el objeto
JSON. En caso positivo muestra una imagen de un icono y en caso negativo no muestra nada.
Lo podramos usar desde una plantilla como esta:
{{# each Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
<br />
{{/each}}
Otra posibilidad interesante es que podramos tener, por ejemplo, un helper que convirtiese un
nombre de usuario Twitter en un enlace a su perfil.
Handlebars.registerHelper('Twitter', function (value) {
return new Handlebars.SafeString('<a href="http://twitter.com/' + value.substr(1) + '">' + value + '</a>');
});
Fjate que este helper tiene ya cierta complejidad, porque hacemos un tratamiento Javascript
al "value", para quitarle la "@" de un usuario Twitter. Para transformar un dato usamos el
mtodo de String "substr()", con lo que demostramos que cuando se est programando un
helper no solamente se pueden mostrar datos de nuestro jSON tal cual, sino tambin se
pueden transformar antes de presentar en la pgina.
Podramos usarlo ya desde una plantilla como esta:
<ul>
{{# each Beers}}
<li>Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
<p>Drinked by: {{Twitter LastCheckin.Drinker}} at {{LastCheckin.When}}</p>
</li>
{{/each}}
</ul>

Disponible online en http://desarrolloweb.com/articulos/como-son-plantillas-
handlebars.html
Helpers de bloque. Cambio de contexto

de una plantilla Handlebars
Usos y ejemplos de helpers y templates de bloque. Al escribir plantillas Mustache

para Handlebars podemos usar ciertos bloques en otros contextos, lo que se
llaman helpers de bloque.
Los helpers de bloque en Handlebars nos permiten cambiar el contexto. En los ejemplos vistos
hasta ahora en el Manual de Handlebars hemos trabajando siempre dentro del mismo
contexto, pero tambin podemos restringirlo a un sub-bloque en un contexto diferente.
Los contextos los podemos entender como niveles de profundidad en el archivo JSON.
Nosotros, en las plantillas, nos podemos meter en un nivel ms profundo para acceder a las
propiedades disponibles en ese contexto.
Veamos los siguientes cdigos de plantillas Handlebars:
<ul>
{{# each Beers}}
<p>Drinked by: {{Twitter LastCheckin.Drinker}} at {{LastCheckin.When}}</p>
</li>
{{/each}}
</ul>
En ese cdigo usamos siempre el mismo contexto. Para llamar al helper Twitter indicamos el
dato "LastCheckin.Drinker" para movernos entre niveles del JSON.
Ahora veamos este otro cdigo, que hara lo mismo exactamente, pero efectuando un cambio
de contexto.
<ul>
{{# each Beers}}
{{#with LastCheckin}}
<p>Drinked by: {{Twitter Drinker}} at {{When}}</p>
{{/with}}
</li>
{{/each}}
</ul>
La diferencia es que en la primera plantilla para acceder a "Drinker" usbamos

"LastCheckin.Drinker" y ahora, al habernos cambiado de contexto, solo usamos "Drinker". Con
el helper {{#with LastCheckin}} indico que voy a moverme al contexto de los datos que hay
bajo la propiedad "LastCheckin". Luego, en el bloque que se encuentra entre "with" y "/with",
podemos usar las propiedades de "LastCheckin" tranquilamente, sin necesidad de indicar el
camino completo para acceder a ellas.
Esto se consigue en helper que nos implemente un "contexto de bloque" y lo creamos mediante
la implementacin de un cdigo como este:
Handlebars.registerHelper('with', function (context, options) {
return options.fn(context);
});
Usamos tambin "registerHelper" con el nombre de este helper. Todo absolutamente normal,
pero tiene la diferencia que la funcin del helper recibe dos parmetros, el contexto y unas
opciones. El contexto es el objeto general y "options" es el subtemplate. Es un objeto propio de
Handlebars que te expone una funcin "fn" que te permite renderizar ese subtemplate en el
contexto que necesites.
Podemos ver otro template de bloque a continuacin que generamos usando un helper
llamado "list". Este helper, cuyo cdigo encontraremos un poquito ms abajo, ya produce la
estructura de lista HTML UL y realiza la iteracin entre todos los elementos del JSON.
{{#list Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
{{#with LastCheckin}}
<p>Drinked by: {{Twitter Drinker}} at {{When}}</p>
{{/with}}
{{/list}}
Para dar soporte a este template en el que usamos el helper "list", tenemos que crear la propia
funcin del helper. Se trata de otro de los denominados "helpers de bloque", que realiza una
lista y que hemos creado a propsito para el ejercicio.
Handlebars.registerHelper('list', function (context, block) {
var ret = "<ul>";
for (var i = 0, j = context.length; i < j; i++) {
ret = ret + "<li>" + block.fn(context[i]) + "</li>";
return ret + "</ul>";
});
En el cdigo, vemos que se genera la lista UL usando otro contexto. Es una especie de bucle
"each" de Handlebars, pero creado por nosotros mismos en un helper de bloque que te
muestra el contenido en una lista.
Nota: como puedes haber imaginado, las estructuras que ya vienen de serie en Handlebars
como "each" o "if", internamente estn desarrolladas por medio de helpers, solo que esos
helpers ya los tienes programados en la librera.
Con esto finalizan los ejemplos sobre Handlebars, la librera Javascript para crear plantillas en
Javascript. Si lo deseas, puedes descargar un zip con los ejemplos revisados en estos artculos.

Disponible online en http://desarrolloweb.com/articulos/helpers-bloque-plantilla-
handlebars.html
Usar Handlebars en NodeJS
Cmo usar el sistema de templates Handlebars en NodeJS, para generar cdigo

HTML en base a plantillas de fcil mantenimiento.
Generar salida en HTML no es que sea lo ms normal en las aplicaciones NodeJS, pero
siempre hay momentos en los que necesitas producir un pedazo de cdigo en formato HTML y
para lo cual es suele ser mucho mejor trabajar mediante un sistema de templates.
Los motivos por los que usar un sistema de plantillas son varios. Lo fundamental es separar el
cdigo por responsabilidades, lo que derivar en la produccin de un cdigo ms mantenible.
Tambin es recomendable porque te resultar mucho ms fcil escribir el cdigo de la salida de
tus aplicaciones. Adems, Handlebars no sirve exclusivamente para producir cdigo HTML,
por lo que te valdr para cualquier otra salida de texto en general.
Existen diversos motores de plantillas que podras usar en Node, pero me gusta Handlebars
por su sencillez. No tienes necesidad de usar otro lenguaje, como ocurre con Jade, y eso lo veo
una ventaja, sobre todo cuando quieres hacer un cdigo limpio y de calidad, pero no quieres
invertir tiempo en aprender nada nuevo.
En el Manual de Handlebars habamos explicado cmo usar el sistema de templates desde

Javascript para navegadores, pero nada te impide usarlo tambin en NodeJS. Es algo que
vamos a tratar en el presente texto.
Instalar Handlebars
Como cualquier otra librera Node, comenzaremos instalando Handlebars mediante el
correspondiente comando de npm.
npm install --save handlebars
Una vez instalado en el proyecto, podremos hacer el require para traernos la funcionalidad de
la librera.
let handlebars = require('handlebars');
Obtener una plantilla de Handlebars compilada

Handlebars trabaja mediante un sistema de plantillas "compiladas". Es decir, para poder usar
una plantilla tenemos que poner en marcha Handlebars y procesar un archivo que tiene el
cdigo de nuestra plantilla. Una vez procesado ese archivo podremos procesar el template las
veces que haga falta, enviando generalmente juegos de datos diferentes, con los que
Handlebars crear la salida.
Generas el template compilado con el mtodo compile() de Handlebars:
//obtengo el cdigo de nuestro template, mediante el sistema de ficheros
var source = fs.readFileSync('ruta-a-tu-template.html, 'utf-8');
//compilo la plantilla mediante handlebars
var miTemplate = handlebars.compile(source);
Enviarle a la plantilla un juego de datos para producir salida

Una vez tienes la plantilla generada, compilada, podrs obtener una cadena con el resultado de
procesar esa plantilla mediante el envo de un conjunto de datos. Esta parte la hars igual que
has aprendido en el Manual de Handlebars para Javascript de lado del cliente.
var salida = miTemplate({
dato1: 'valor 1',
dato2: 'valor2'
});
Ahora en la variable "salida" tendrs la cadena resultante de producir ese template con el juego
de datos que se le ha enviado por parmetro.
Con lo que has aprendido ya puedes producir tus cadenas con cualquier contenido definido en
una plantilla almacenada en un fichero externo. Por lo que respecta a la sintaxis y posiblidades
de Handlebars ya te recomiendo nuestro Manual de Handlebars o la propia documentacin
oficial.
Un module que encapsula el compilado de templates

Para mejorar la organizacin del cdigo y mantener la complejidad de la compilacin de
plantillas (que no es tanta, pero se agradece) en un mdulo de tu proyecto, generalmente uso
un paso adicional, que a la larga tambin te quita trabajo cuando tienes que usar varios
templates en un proyecto.
Bsicamente se trata de crear un mdulo que tiene una nica funcin que sirve para obtener
un template y compilarlo. Este mdulo es el nico de mi aplicacin que conoce a Handlebars y
toda plantilla que necesite usar se la pido a l.
'use strict'
//sistema de archivos
let fs = require('fs');
//handlebars
let handlebars = require('handlebars');
module.exports = {
getTemplate
function getTemplate(archivo) {
let source = fs.readFileSync(archivo, 'utf-8');
let template = handlebars.compile(source);
return template;
Como ves, lo nico que exporta hacia afuera es el mtodo getTemplate, que recibe el archivo
que debe compilar para producir la correspondiente plantilla.
Con este mdulo generado, usarlo para producir plantillas en cualquier parte de mi proyecto es
tan sencillo como esto:
let handlebars = require('./modules/handlebars/get-template');
let templateJuego = handlebars.getTemplate('./modules/handlebars/templates/mi-plantilla.html')
Quitando el require, que lo debes hacer una nica vez, la generacin de la plantilla se reduce a
una lnea de cdigo. No es que fuera muy compleja, esa compilacin, pero haba que ir al
sistema de archivos a traerse el cdigo del template, compilarlo, etc. Ahora queda mucho ms
conciso y la complejidad encapsulada en un sencillo mdulo.
Conclusin
Aprender Handlebars no te llevar ms de 10 minutos y usarlo para generar plantillas, con las
que producir salida cmodamente y en cualquier formato, te ahorrar mucho tiempo de
desarrollo, evitando cdigo difcil de mantener, a medio y largo plazo.
Con este artculo ahora lo tienes mucho ms fcil de integrar en NodeJS, por lo que no hay
excusas para comenzar a trabajar con este sencillo pero potente sistema de templates.
Este artculo es obra de Miguel Angel Alvarez

Disponible online en http://desarrolloweb.com/articulos/usar-handlebars-nodejs.html

Manual Handlebars PDF

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Handlebars PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Manual de Handlebars

Introduccin: Manual de Handlebars

Manual de Handlebars, un sencillo sistema de plantillas Javascript basado en Mustache

Handlebars es un popular sistema de plantillas en Javascript que te permite crear y formatear

Se trata de un complemento esencial para el desarrollo frontend y para la separacin del

Encuentras este manual online en:

Autores del manual

Apasionado de la informtica, los videojuegos, rol y... la cerveza. Key

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de

Sistemas de plantillas en Javascript

Por qu plantillas en Javascript

Por supuesto, si maana queremos modificar la plantilla, agregando etiquetas, cambiando la

.append("<h1>" + titulo + "</h1>")

Cmo funcionan los motores de plantillas

pedazos de cdigo HTML que puedes insertar cmodamente en el DOM de la pgina.

En general, todos los sistemas funcionan de la misma manera. En tu aplicacin tendrs un

Nota: la diferencia de un sistema de plantillas como los que mencionaremos a

Relacin de los principales sistemas de plantillas en Javascript

Sistema de plantillas ultra-rpida para generar HTML a partir de objetos JSON.

La siguiente generacin de plantillas jQuery, optimizadas para un alto rendimiento.

En el prximo artculo explicaremos uno de estos motores de plantillas Javascript,

Este artculo es obra de Eduard Toms

Plantillas Javascript con Handlebars

Explicaciones de Handlebars, un sistema de plantillas Javascript que te ahorrar

HandlebarsJS es un sistema de plantillas Javascript y una herramienta esencial. Est basado

El primer paso para entender qu es Handlebars y por qu nos resultar de utilidad es

Cmo funciona Handlebars

La operativa normal con Handlebars es la siguiente:

Cargar una plantilla en Handlebars:

var tmpl = Handlebars.compile(stemplate);

Ejecutar un template Handlebars:

var html = tmpl(ctx);

Ese HTML es el que podremos usar ms tarde para insertar en la pgina.

Primer ejemplo de uso de Handlebars

<script type="text/x-handlebars-template" id="template">

{{# each Beers}}

Name: {{Name}} <br />

As nos traemos el cdigo de la plantilla:

var stemplate = $("#template").html();

Luego compilamos la plantilla:

var tmpl = Handlebars.compile(stemplate);

var ctx = {};

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

Y por fin ejecutamos nuestra plantilla, enviando ese JSON.

Acabamos aadiendo el contenido por medio de cualquier librera Javascript. En jQuery

El JSON que recibo

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

{"Name":"Devil's","Brewery":"Marina","Style":"Indian Pale Ale","Abv":"9.0","Ibu":"150","Favorite":true,"LastCheckin":{"When":"24/04/2013 -

{"Name":"Guinness Draught","Brewery":"Guinness","Style":"Irish Stout","Abv":"4.5","Ibu":"40","Favorite":true,"LastCheckin":{"When":"24/04/2013 -

Puedes ver el cdigo completo de este primer ejemplo a continuacin:

<link href="Site.css" rel="stylesheet" />

<script type="text/x-handlebars-template" id="template">

{{# each Beers}}

Name: {{Name}} <br />

<div id="content" style="display:none;">

var stemplate = $("#template").html();

var tmpl = Handlebars.compile(stemplate);

var xhr = $.ajax({

var ctx = {};

var html = tmpl(ctx);

En el siguiente artculo exploraremos cmo son las plantillas de Handlebars, su sintaxis,