Handlebars

909 visualizaciones

Publicado el

Introducción a Handlebarsks

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
909
En SlideShare
0
De insertados
0
Número de insertados
12
Acciones
Compartido
0
Descargas
11
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Handlebars

  1. 1. HandlebarsDe JSON a HTML en menos que canta un gallo Eduard Tomàs i Avellana @eiximenis
  2. 2. Qué es Handlebars Librería de templating para Javascript Objetivo: pasar de JSON a HTML (DOM)
  3. 3. Alternativas Jquery_tmpl (discontinuado) PURE (Pure Unobtrusive Rendering Engine) jsRender (beta) _.template …
  4. 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. 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. 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. 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. 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. 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. 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. 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.registerHelperHandlebars.registerHelper(‘fullName’, function(propValue) { return propValue.firstName + ‘ ‘ + propValue.lastName;});
  12. 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. 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. 14. ¡Gracias!Q&A

×