Manual Handlebars PDF

Manual de Handlebars
http://desarrolloweb.com/manuales/manual-handlebars.html Página 1 de 25
Introducción: 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

código HTML de una manera muy sencilla. En lugar de hacer operaciones tediosas en librerías
como jQuery para tocar el DOM insertando elementos de manera independiente con append o
prepend, te permite crear bloques de código HTML, escritos directamente con HTML que
poblarás 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 código por
responsabilidades y crear la salida de las aplicaciones de una manera sencilla, manteniendo el
código HTML separado del código Javascript. En este manual aprenderás 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 separación del

frontend/backend, de modo que podamos hacer nuestros desarrollos dinámicos 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 librería de manipulación del DOM como jQuery, o
simplemente con Javascript plano. También 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 artículos de este manual.
Eduard Tomàs
Apasionado de la informática, 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

formación online EscuelaIT. Comenzó en el mundo del desarrollo web
en el año 1997, transformando su hobby en su trabajo.
Sistemas de plantillas en Javascript
Qué son los motores de plantillas y cómo nos pueden facilitar la vida a los
programadores en Javascript. Ejemplos de librerías que implementan las
plantillas.
Si pensabas que las plantillas eran algo ligado al back-end es que todavía tienes bastante que
explorar en cuanto a desarrollo del lado del cliente. En este artículo pretendemos explicar qué
son las plantillas Javascript, de modo que podamos entender su utilidad y cómo pueden llegar
a ser esenciales para una programación 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 dinámicamente
elementos en el DOM de la página web. Así que comenzaremos explicando sus ventajas con un
ejemplo en el que podemos habernos encontrado.
Por qué plantillas en Javascript

Si usas jQuery, sabrás que puedes insertar código HTML en la página con los métodos
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 código HTML, habrás
encontrado que no es tan práctico. Si has pasado por ahí, habrás padecido un mogollón de
llamadas a esos métodos, invocadas en cadena, que resultan difíciles de programar y todavía
más complejas de entender a simple vista y de mantener con el tiempo.
¿No sería mejor mantener esas estructuras en HTML plano y simplemente llamar a una
función que nos cargue los datos enviados dentro del código HTML? Pues eso es básicamente
lo que conseguimos con las plantillas.
No hay mucho secreto. Nuestra plantilla tendría un aspecto como este código 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 librería
Handlebars JS.
Como ves, hay bloques de contenido que se pueden rellenar con datos variables, son los
{{titulo}} y {{body}}. Pues nada más tendríamos que invocar a esa plantilla enviando los datos
que queremos cargar en el HTML y nos devolverá el código HTML resultante, ya con los datos
dentro de las etiquetas, en una cadena que podríamos insertar en el DOM de una manera
sencillísima con nuestra librería Javascript preferida, ya sea jQuery o con cualquier otra.
Por supuesto, si mañana queremos modificar la plantilla, agregando etiquetas, cambiando la

estructura o jerarquía, simplemente tendríamos que modificar la plantilla, tal como si fuera un
HTML normal y el Javascript permanecería intacto. Vamos, ¡una maravilla!
Nos queda en el aire ver cómo sería el sistema para ejecutar la plantilla, pero realmente esa
implementación depende del sistema de plantillas que estés utilizando, aunque generalmente
será algo tan sencillo como ejecutar un método o una función.
Nota: Qué tal, ¿se entiende bien la estructura del HTML de la plantilla a simple vista? Si
todavía no te resulta obvio lo útil de mantener las plantillas en HTML, echa un vistazo al
código Javascript siguiente. Algo como esto sería lo que tendríamos 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 práctico, y aunque
se pueda hacer perfectamente, no resulta cómodo.
Cómo funcionan los motores de plantillas

El paradigma de desarrollo del lado del cliente está cambiando y estas librerías son una
muestra de ello. Cada vez más en el front-end consumimos más lo que se llaman "rest-api",
que te ofrecen datos que vienen del back-end en formato de texto, generalmente en notación
JSON. Pues estas librerías de plantillas lo que te ofrecen es pasar rápidamente de esos JSON a
pedazos de código HTML que puedes insertar cómodamente en el DOM de la página.
En general, todos los sistemas funcionan de la misma manera. En tu aplicación tendrás un

HTML pequeño 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 además compañeros inseparables de algunas librerías avanzadas
Javascript que nos traen paradigmas de desarrollo diferentes, como los MVVM, que sería 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 librerías Javascript te vendrá ideal.
Nota: la diferencia de un sistema de plantillas como los que mencionaremos a

continuación 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 automáticamente, se modifican otras.
Relación de los principales sistemas de plantillas en Javascript

Existen diversos sistemas de plantillas en Javascript que puedes usar a tu voluntad. A
continuación tenemos una lista de las principales librerías Javascript que tendremos a nuestra
disposición 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 compilación y procesamiento.
handlebarsjs.com
Underscore.js:
Una librería Javascript que provee un gran abanico de funcionalidades diversas y útiles para
cualquier proyecto. Entre otras cosas podrás generar y usar plantillas Javascript.
underscorejs.org
Pure:
Sistema de plantillas ultra-rápida para generar HTML a partir de objetos JSON.
beebole.com/pure
jsrender:
La siguiente generación de plantillas jQuery, optimizadas para un alto rendimiento.
github.com/BorisMoore/jsrender
En general, podríamos nombrar algunas otras librerías, pero estas son las que actualmente
mejor pinta tienen. En la actualidad todo depende de tus preferencias, ya que en Javascript
existen decenas de librerías para resolver las mismas cosas. Todo será ver la que al final acaba
teniendo mayor penetración.
En el próximo artículo explicaremos uno de estos motores de plantillas Javascript,

Handlebars, ofreciendo ejemplos sobre sus capacidades y la manera de implementarlas.
Este artículo es obra de Eduard Tomàs

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 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, 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.
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:
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>
{{# 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 artículo exploraremos cómo son las plantillas de Handlebars, su sintaxis,

posibilidades, etc.

Disponible online en http://desarrolloweb.com/articulos/plantillas-javascript-
handlebars.html
Cómo son las plantillas Handlebars
Estudio del sistema de plantillas Javascript Handlebars, análisis de las

posibilidades de las plantillas, sintaxis, estructuras de control, tutorial, etc.
En los artículos anteriores del Manual de Handlebars hemos podido conocer qué nos ofrecen
los sistemas de plantillas Javascript y cómo dar los primeros pasos con Handlebars. Ahora
vamos a estudiar más de cerca esta librería 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 código HTML de una plantilla comenzando por {{ y
terminando por }}.
{{valor}}
Aunque también se pueden usar tres llaves a la vez, en cuyo caso no escapará el código 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 además 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 expresión 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 también a compuestas en notación 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
También tenemos disponible la figura de los "Helpers", que nos ayudan a registrar nuestras
propias funciones para hacer cosas más concretas y repetitivas. Podemos entender los helpers
como una extensión del propio sistema de plantillas Handlebars, y son como funciones que se
pueden referenciar desde cualquier template. Permiten ejecutar código para dar mayor
funcionalidad a las plantillas y así modificar/combinar datos del contexto.
{{fullName author}} invoca al helper fullName pasándole la propiedad author del contexto.
Se registran y se crean helpers propios con Handlebars.registerHelper(), con código como el

siguiente:
Handlebars.registerHelper('Italize', function (value) {
return new Handlebars.SafeString("<em>" + value + "</em>");
})
Para crear un helper siempre usamos el método "registerHelper", indicando como primer
parámetro el nombre del helper, seguido de un segundo parámetro que es la función del helper
propiamente dicho. En esa función recibimos además datos que podemos usar dentro del
código del helper y cuyos valores le pasamos desde el código de la plantilla.
Nota: el método "SafeString()" es de Handlebars y lo que hace es decirle a la librería que el

código 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 función SafeString(),
handlebars entendería que las etiquetas son texto y nos las mostaría escapadas, de modo
que se verían en la página.
Por ejemplo, el helper anterior llamado "Italize" se podría invocar desde la plantilla con el
siguiente código:
{{# each Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} <br />
{{/each}}
Nota: en este caso el helper Italize simplemente cambia a cursiva un texto y no sería muy
necesario implementar por medio de un helper. Podría venirnos bien si más adelante todos
los "Italize" los queremos mostrar de una manera especial y que solo tengamos que
modificar para ello el código del helper, pero generalmente lo usaremos para alguna
estructura un poco más compleja.
Podemos ver el código 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 código fuente del ejemplo del artículo anterior de este manual, encontrarás 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 encontrarás que
varían 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 cómo sería una plantilla que tiene un bloque "if", para mostrar solamente
los contenidos que tengan unas caraterísticas.
{{# each Beers}}
{{# if Favorite}}
{{/if}}
{{/each}}
Con esto conseguimos que solo se impriman aquellas cervezas que se han maracado como
"Favorite".
Ejemplo de helper más elaborado

En nuestro trabajo con helpers encontaremos casi siempre casos más claros donde el uso de
estas funciones nos ahorrarán más código. 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 parámetro "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 podríamos usar desde una plantilla como esta:
{{# each Beers}}
Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
<br />
{{/each}}
Otra posibilidad interesante es que podríamos 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>');
});
Fíjate 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
método 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 también se
pueden transformar antes de presentar en la página.
Podríamos 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 también 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 más profundo para acceder a las
propiedades disponibles en ese contexto.
Veamos los siguientes códigos de plantillas Handlebars:
<ul>
{{# each Beers}}
<p>Drinked by: {{Twitter LastCheckin.Drinker}} at {{LastCheckin.When}}</p>
</li>
{{/each}}
</ul>
En ese código 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 código, que haría 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" usábamos

"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 implementación de un código como este:
Handlebars.registerHelper('with', function (context, options) {
return options.fn(context);
});
Usamos también "registerHelper" con el nombre de este helper. Todo absolutamente normal,
pero tiene la diferencia que la función del helper recibe dos parámetros, 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 función "fn" que te permite renderizar ese subtemplate en el
contexto que necesites.
Podemos ver otro template de bloque a continuación que generamos usando un helper
llamado "list". Este helper, cuyo código encontraremos un poquito más abajo, ya produce la
estructura de lista HTML UL y realiza la iteración 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
función del helper. Se trata de otro de los denominados "helpers de bloque", que realiza una
lista y que hemos creado a propósito 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 código, 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 están desarrolladas por medio de helpers, solo que esos
helpers ya los tienes programados en la librería.
Con esto finalizan los ejemplos sobre Handlebars, la librería Javascript para crear plantillas en
Javascript. Si lo deseas, puedes descargar un zip con los ejemplos revisados en estos artículos.

Disponible online en http://desarrolloweb.com/articulos/helpers-bloque-plantilla-
handlebars.html
Usar Handlebars en NodeJS
Cómo usar el sistema de templates Handlebars en NodeJS, para generar código

HTML en base a plantillas de fácil mantenimiento.
Generar salida en HTML no es que sea lo más normal en las aplicaciones NodeJS, pero
siempre hay momentos en los que necesitas producir un pedazo de código 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
código por responsabilidades, lo que derivará en la producción de un código más mantenible.
También es recomendable porque te resultará mucho más fácil escribir el código de la salida de
tus aplicaciones. Además, Handlebars no sirve exclusivamente para producir código HTML,
por lo que te valdrá para cualquier otra salida de texto en general.
Existen diversos motores de plantillas que podrías 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 código limpio y de calidad, pero no quieres
invertir tiempo en aprender nada nuevo.
En el Manual de Handlebars habíamos explicado cómo usar el sistema de templates desde

Javascript para navegadores, pero nada te impide usarlo también en NodeJS. Es algo que
vamos a tratar en el presente texto.
Instalar Handlebars
Como cualquier otra librería 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 librería.
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
código 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 método compile() de Handlebars:
//obtengo el código 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, podrás obtener una cadena con el resultado de
procesar esa plantilla mediante el envío de un conjunto de datos. Esta parte la harás 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" tendrás la cadena resultante de producir ese template con el juego
de datos que se le ha enviado por parámetro.
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 documentación
oficial.
Un module que encapsula el compilado de templates

Para mejorar la organización del código y mantener la complejidad de la compilación de
plantillas (que no es tanta, pero se agradece) en un módulo de tu proyecto, generalmente uso
un paso adicional, que a la larga también te quita trabajo cuando tienes que usar varios
templates en un proyecto.
Básicamente se trata de crear un módulo que tiene una única función que sirve para obtener
un template y compilarlo. Este módulo es el único de mi aplicación 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 método getTemplate, que recibe el archivo
que debe compilar para producir la correspondiente plantilla.
Con este módulo 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 generación de la plantilla se reduce a
una línea de código. No es que fuera muy compleja, esa compilación, pero había que ir al
sistema de archivos a traerse el código del template, compilarlo, etc. Ahora queda mucho más
conciso y la complejidad encapsulada en un sencillo módulo.
Conclusión
Aprender Handlebars no te llevará más de 10 minutos y usarlo para generar plantillas, con las
que producir salida cómodamente y en cualquier formato, te ahorrará mucho tiempo de
desarrollo, evitando código difícil de mantener, a medio y largo plazo.
Con este artículo ahora lo tienes mucho más fácil de integrar en NodeJS, por lo que no hay
excusas para comenzar a trabajar con este sencillo pero potente sistema de templates.
Este artículo es obra de Miguel Angel Alvarez

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

Manual Handlebars PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Handlebars PDF

Cargado por

Copyright:

Formatos disponibles

Manual de Handlebars

Introducción: 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 separación del

Encuentras este manual online en:

Autores del manual

Apasionado de la informática, 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 mañana queremos modificar la plantilla, agregando etiquetas, cambiando la

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

Cómo funcionan los motores de plantillas

pedazos de código HTML que puedes insertar cómodamente en el DOM de la página.

En general, todos los sistemas funcionan de la misma manera. En tu aplicación tendrás un

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

Relación de los principales sistemas de plantillas en Javascript

Sistema de plantillas ultra-rápida para generar HTML a partir de objetos JSON.

La siguiente generación de plantillas jQuery, optimizadas para un alto rendimiento.

En el próximo artículo explicaremos uno de estos motores de plantillas Javascript,

Este artículo es obra de Eduard Tomàs

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

Cómo 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);

Primer ejemplo de uso de Handlebars

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

{{# each Beers}}

Name: {{Name}} <br />

Así nos traemos el código 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 añadiendo el contenido por medio de cualquier librería 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 código completo de este primer ejemplo a continuación:

<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 artículo exploraremos cómo son las plantillas de Handlebars, su sintaxis,

Este artículo es obra de Eduard Tomàs

Cómo son las plantillas Handlebars

Estudio del sistema de plantillas Javascript Handlebars, análisis de las