Handlebars
-
Upload
eduard-tomas -
Category
Documents
-
view
557 -
download
4
description
Transcript of Handlebars
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