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}}
<li>Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
<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}}
<li>Name: {{Name}} - Abv: {{Italize Abv}} {{ShowStar Favorite}}
{{#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.

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.