Introducción a Handlebarsks

1. Handlebars
De JSON a HTML en menos que canta un gallo
Eduard Tomàs i Avellana
@eiximenis

2. Qué es Handlebars
 Librería de templating para Javascript
 Objetivo: pasar de JSON a HTML (DOM)

3. Alternativas
 Jquery_tmpl (discontinuado)
 PURE (Pure Unobtrusive Rendering Engine)
 jsRender (beta)
 _.template
 …

4. Handlebars
 Cargar un template
 Código “HTML” con mezcla de elementos de control
 Compilar el template (convertirlo a una función js)
 Ejecutar el template para obtener la cadena HTML
 Insertar el HTML en el DOM

5. Cargar un template
 En tag <script> usando un type ignorado por el navegador
 <script type=“text/x-handlebars-template”>…</script>
 Template disponible en el DOM en el $(document).ready()
 A través de llamada Ajax
 Necesario sincronizar el retorno de la llamada con la compilación y ejecución de
los templates

6. Compilar un template
 Llamar a Handlebars.compile(“template”)
 “template” es la cadena con el contenido del template
 El resultado es una función js

7. Ejecutar un template
 Invocar la función js devuelta por Handlebars.compile
 Argumento: Objeto json con los datos del template
 Devuelve: Cadena HTML resultado de aplicar el template

8. Templates en Handlebars
 Valores simples: {{valor}} / {{{valor}}}
 La triple llave indica a Handlebars que no “escape” el código HTML de valor
 Expresiones de bloque
 {{#nombre}} … {{/nombre}}
 Se evalúan en un contexto distinto al del template original

9. Expresiones de bloque built-in
 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 expresión devuelve false, undefined, null, “” o [] NO renderiza el bloque
 Admite bloque {{else}}
 Unless {{#unless expresion}}
 Contrario de if: Renderiza el bloque si expresión devuelve false, undefined, null “”
ó []

10. “Paths” en Handlebars
 Path: Como a partir de una expresión se encuentra la propiedad del contexto
(objeto JSON)
 Simples: {{name}} -> Referencia a la propiedad “name” del contexto
 Compuestas {{author.name}} -> Referencia a la propiedad “name” de la propiedad
“author“ del contexto
 Referencia a contexto padre: {{../name}} -> Referencia a la propiedad “name” del
contexto padre. Se usa en expresiones de bloque.

11. Helpers
 Se pueden referenciar desde cualquier template y permiten ejecutar una
función para modificar/combinar datos del contexto
 {{fullName author}} -> Invoca al helper fullName pasándole la propiedad
author del contexto
 Se pueden crear y registrar helpers propios con Handlebars.registerHelper
Handlebars.registerHelper(‘fullName’, function(propValue) {
return propValue.firstName + ‘ ‘ + propValue.lastName;
});

12. Helpers (ii)
 Si un helper devuelve HTML, debe devolverlo a través del objeto
Handlebars.SafeString, en caso contrario Handlebars escapará el HTML
generado.
 Los helpers reciben todo el contexto actual en this.

13. Helpers de bloque
 Se pueden definir expresiones de bloque propias:
 {{#list people}}{{firstName}} {{lastName}}{{/list}
 Son helpers con DOS parámetros
 Lista de elementos (ítems) sobre la que iterar
 Subtemplates a aplicar (options)
 Se aplican usando .fn(contexto)
Handlebars.registerHelper('list', function(items, options) {
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li>";
}
return out + "</ul>";
});

14. ¡Gracias!
Q&A