introducción a handelbars.js

Introducción al sistema de plantillas handelbars.js

klee

archivado en: JavaScript / 20 octubre, 2013

Hay ocasiones en que nos puede interesar hacer una página que no necesite recargarse para cambiar los contenidos, son las llamadas Single Page Aplication (SPA), y por la razón que sea no queremos tirar de AJAX y un servidor... por ejemplo, si necesitamos que funcione descargada en una tablet.

En estos casos, lo más sensato es emplear algún framework de js, y más aún si la aplicación es sofisticada, pues de lo contrario corremos el riesgo de perdernos en un laberinto de bindeos y cadenas insostenible. Otra solución menos compleja es recurrir a alguna librería de plantillas, como la handelbars.js, de la que hablaré en esta entrada.

Deriva de la moustaches, pero con más posibilidades, y es realmente fácil de emplear. La bajamos, la cargamos y luego hacemos las plantillas, a las cuales podemos pasar datos dinámicos en formato JSON. Vamos por partes poniendo como ejemplo una biblioteca virtual.

Nuestra primera plantilla

El mecanismo básico de Handelbars es muy sencillo:

1) Las plantillas se definen en un tag del tipo script, en el que definimos el tipo como «text/x-handlebars-template».

<script id="cabecera" type="text/x-handlebars-template">

Aquí el contenido de la plantilla

</script>

2) Luego leemos esa plantilla, la compilamos y la insertamos en el DOM mediante alguna función al uso, como .html(), .append() o .prepend().

...

<script src="js/vendor/jquery-1.10.2.min.js"></script>

<script src="js/vendor/handlebars.js"></script>

</head>

<body>

<section id="main">

<header id="contenedorCabecera">

</header>

</section>

<script id="cabecera" type="text/x-handlebars-template">

{{ titular }}

</script>

<script>

// La leemos a partir de su id mediante la función .html()

var cabecera = $("#cabecera").html();

// La compilamos guardando el resultado

var plantillaCabecera = Handlebars.compile(cabecera);

// Y ya la insertamos

$("#contenedorCabecera").html(plantillaCabecera);

</script>

Y así podemos ir montando poco a poco la página, pero lo verdaderamente chulo de estas plantillas es que podemos pasarlas datos dinámicos a partir de un objeto JSON. Para eso, en la plantilla ponemos el contenido dinámico entre dos llaves (de ahí el nombre de moustaches, mostachos) y pasamos esos datos a la plantilla antes de insertarla... algo así:

<script id="cabecera" type="text/x-handlebars-template">

{{titular}}

</script>

<script>

var datos = {titular:"Librería virtual"};

var cabecera = $("#cabecera").html();

var plantillaCabecera = Handlebars.compile(cabecera);

// Pasamos los datos a la plantilla

var plantillaCabeceraConDatos = plantillaCabecera(datos)

$("#contenedorCabecera").html(plantillaCabeceraConDatos);

</script>

Nota: si los datos enviados tienen tags HTML, hay que encorchetar las variables entre tres pares de llaves:

<script id="cabecera" type="text/x-handlebars-template">

{{{titular}}}

</script>

Iteración de elementos

Aún más interesante:  podemos iterar sobre los elementos de un array del JSON en la propia plantilla. Por ejemplo, imaginemos que tenemos este jasonako con los libros de la librería.

datos = {

libros : [

{ titulo: "Kalevala", "genero": "mitología" },

{ titulo: "Los mandarines", "genero": "novela" },

{ titulo: "Giordano Bruno", "genero": "ensayo" }

]

};

Para recorrerlos, es decir, que para cada ítem del array libros se aplique un template, hay que hacer un bucle con each, que inglés significa cada.

{{ #each nombreArray }}

{{ itemArray }}

{{/each }}

Así, podemos añadir un elemento al cuerpo del body, tras la cabecera:

<article id="contenedorLibros">

<h2>Libros</h2>

</article>

Definir una nueva plantilla:

<script id="listadoLibros" type="text/x-handlebars-template">

<ul>

{{#each libros}}

<li>{{titulo}}</li>

{{/each}}

</ul>

</script>

Y hacer la misma operación de antes:

...

var listadoLibros = $("#listadoLibros").html();

var plantillaListadoLibros = Handlebars.compile(listadoLibros);

var plantillaListadoLibrosConDatos = plantillaListadoLibros(datos) ;

$("#contenedorLibros").append(plantillaListadoLibrosConDatos);

</script>

Bueno, la librería es más compleja que lo expuesto hasta aquí, pero por hoy ya está bien. Si saco tiempo, otro día hablo de los helpers, que son funciones que podemos invocar cuando estamos compilando una plantilla, pero en realidad no tengo claro si son realmente útiles, ya que me parece más cómodo, eficaz y escalable si trabajamos los datos del JSON antes de enviarlos y no durante la compilación.

|| Tags: ,

valoración de los lectores sobre introducción a handelbars.js

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (5 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Una respuesta a “introducción a handelbars.js

  1. Pingback: Internalización de templates con i18N y Handlebars en javascript | Sergio Fraile