Handlebarjs: Referencia básica

Si eres nuevo usando Handlebars o alguna de sus variantes, como yo, probablemente te venga bien una guia rápida como ésta. En concreto, la he escrito basándome en la librería hbs para Express.js:

1. Instala y configura:

basta con un npm install hbs --save e incluir en nuestra app lo siguiente:

var hbs = require('hbs')
app.set('view engine', 'hbs')


Para mostrar las vistas, basta con crear archivos .hbs, meterlos dentro de la carpeta /views y llamar a render, pasándole las variables que queramos:

res.render('index', {
   param1: param1,
   param2: param2
})

2. Mostrar Variables: 

Llamando a la variable o al objeto a mostrar entre corchetes

{{ variable }} o {{ objecto.propiedad }}

3. Foreach con Arrays: 

Suponiendo que tienes un array llamado articles que posee la propiedade name

{{#each articles}} {{ name }} {{/each}}

también se puede usar sin el #each

{{#articles}} {{ name }} {{/articles}}

4. Crear parciales:

Para no incluir en todas nuestras vistas un header y un footer copiandolo, podemos incluir otros archivos en cada vista de tal manera:

{{>header}}
Aqui el HTML de tu página
{{>footer}}

Lo que llamará al finero views/header.hbs y views/footer.hbs, o la ruta que hayamos indicado al registrar las parciales en nuestra app:

hbs.registerPartials(__dirname + '/views/partials');

5. Registrar helpers: 

Puedes crear los helpers que quiers para que, pasandole un elemento entre corchetes, lo muestren de la manera que quieras. Por ejemplo, si quieres que al pasar un objeto se imprima un link usando sus propiedades, solo tendrás que hacer lo siguiente:

hbs.registerHelper('link', function(link) {
return new hbs.SafeString(
"<a href='" + link.url + "' rel='" + link.rel + "'>" + link.name + "</a>"
)
})

y llamarlo de tal manera:

{{link story}}

También se pueden crear helpers que funcionen en bloque, en plan:

{{#bold}}{{texto}}{{/bold}}

6. Sentencias condicionales:

Por ejemplo, un If:

{{~#if links}}
Si hay links, ejecutar esto
{{~^~}}
.. si no, esto
{{~/if~}}

Se puede usar sin los símbolos "~", pero entonces se generaran espacios en blanco dentro del html en la linea en la que se llamen a las diferentes partes del if. De hecho, también se puede usar con else:

{{#if links}}
Si hay links, ejecutar esto
{{else}}
.. si no, esto
{{/if}}


7. Llamar a otra variable dentro de un each

Podemos ir "subiendo" de directorio en cada variable que llamemos usando los dos puntos ".." para llamar dentro de un each a otra variable. Por ejemplo , si tenemos un array llamado links y una variable aparte llamada variable:

{{#links}}
   <li>{{link .}} {{../variable}}</li>
{{/links}}


De hecho, podemos saltarnos tantos niveles como sean necesarios: "../../../../variable".

Si necesitas más documentación, pásate por: http://handlebarsjs.com/