HandlebarsDe JSON a HTML en menos que canta un gallo

Eduard Tomàs i Avellana

@eiximenis

Qué es Handlebars

Librería de templating para Javascript

Objetivo: pasar de JSON a HTML (DOM)

Alternativas

Jquery_tmpl (discontinuado)

PURE (Pure Unobtrusive Rendering Engine)

jsRender (beta)

_.template

…

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

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

Compilar un template

Llamar a Handlebars.compile(“template”)

“template” es la cadena con el contenido del template

El resultado es una función js

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

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

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 “” ó []

“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.

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;});

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.

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>";});

¡Gracias!

Q&A