Que Es Handlebars.Js Y Como Usarlo? - Blog de data center, cloud

Anteriormente habíamos compartido 5 Herramientas De Desarrollo Web Que Deberias Conocer, entre estas herramientas se encuentra Handlebars.Js. En el presente articulo hablaremos mas en profundidad de Handlebars.Js, para que sirve, y dar un ejemplo practico de como usar esta herramienta de desarrollo web.

motor de plantillas

Primeros Pasos

Para empezar, vamos a ir a la página web de Handlebars y descargamos el archivo del código fuente, handlebars.js. Coloque el archivo en una carpeta adecuada de su proyecto. Enlace el archivo de los documentos HTML. Usted puede añadir el enlace dentro de la etiqueta del head o antes de la <body>.

[js] &amp;lt;script src=&amp;quot;js/handlebars.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt; [/js]

Como buena alternativa, podemos añadir el CDN de esta libreria:

[js] &amp;lt;script src=&amp;quot;//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js&amp;quot;&amp;gt;
&amp;lt;/script&amp;gt;
[/js]

Una vez incluida podemos empezar a diseñar la plantilla.

Datos Básicos

Vamos a añadir los siguientes datos: nombre, edad, y el origen de la persona.

[js]

var dataSource = {
&amp;quot;name&amp;quot;: &amp;quot;Joe Bloggs&amp;quot;,
&amp;quot;age&amp;quot; : &amp;quot;19&amp;quot;,
&amp;quot;from&amp;quot;: &amp;quot;United Kingdom&amp;quot;
}

[/js]

Estos datos sirven como ejemplo. Como se ha mencionado, puede recuperar formas similares de datos de la mayoría de las aplicaciones web que proporcionan una API abierta como Twitter, Instagram, Flickr, Dribbble y Forrst – aunque usted obtendrá mayores líneas de datos que lo que hemos mostrado anteriormente. Como alternativa, puede intentar usar un generador de JSON para generar algunos datos aleatorios.

La Plantilla

Una vez que tenemos los datos en nuestras manos, podemos crear la plantilla para colocar estos datos. Vamos a echar un vistazo a el siguiente código.:

[html]

&amp;lt;div id=&amp;quot;content&amp;quot; class=&amp;quot;content-wrap&amp;quot;&amp;gt;
&amp;lt;script id=&amp;quot;template&amp;quot; type=&amp;quot;text/x-handlebars-template&amp;quot;&amp;gt;
&amp;lt;p&amp;gt;Hi, I’m {{name}}. I’m {{age}}, and I’m from {{from}}&amp;lt;/p&amp;gt;
&amp;lt;/script&amp;gt;
&amp;lt;/div&amp;gt;

[/html]

La Plantilla con Handlebars se establece dentro de una etiqueta de script de forma especial, type: text/x-handlebars-template, y preferiblemente también con un ID, porque la selección de un elemento con ID en JavaScript técnicamente es más sencillo y rápido que utilizar una clase.

Si bien cada uno de los datos se declara entre llaves dobles rizadas, {{…}}; Esto también se conoce como expresiones Handlebars.

Sin embargo, antes de que podamos ver el resultado en el navegador que tenemos que compilar estos códigos, combinar los datos con la plantilla.

Compilando

Vamos a almacenar la plantilla en una variable de JavaScript, de la siguiente forma:

[js]var template = $(‘#template’).html(); [/js]

A continuación, ponemos la variable de plantilla en Handlebars.compile() para compilar la plantilla:

[js]var compile = Handlebars.compile(template);[/js]

Lo más importante en el código anterior es el nombre de la variable, compile. Vamos a utilizar junto con nuestros datos para generar el resultado final, del siguiente modo:

[js]var result = compile(dataSource);[/js]

Por último lo ponemos en #content usando el método .html() de jQuery, justo así:

[js]$(‘#content’).html(result); [/js]

Esto nos dará el siguiente resultado en los navegadores:

resultado handlebars

Añadiendo HTML A Los Datos

A veces, nuestros datos podrían contener etiquetas HTML, por ejemplo:

[js]

var dataSource = {
&amp;quot;name&amp;quot;: &amp;quot;&amp;lt;em&amp;gt;Joe Bloggs&amp;lt;/em&amp;gt;&amp;quot;,
&amp;quot;age&amp;quot;: &amp;quot;19&amp;quot;,
&amp;quot;from&amp;quot;: &amp;quot;United Kingdom&amp;quot;
}

[/js]

Por defecto, Handlebars omitirá estas etiquetas. Ellos a su vez la etiqueta en su entidad, < se convertirá en < mientras que > se convertirá en >. Así que vamos a obtener un resultado inesperado, como se muestra a continuación:

escape html

Para evitar que Handlebars omita la conversión de las etiquetas HTML, debemos utilizar llaves triples {{{…}}} para declarar los datos, así:

[js] Hi, My name is {{{name}}}. … [/js]

Ahí lo tienes! La etiqueta ahora se procesa de forma correcta; el nombre se muestra en cursiva.

html con etiquetas

Ayuda Condicionales

Handlebars tiene soporte para funciones condicionales. Esta característica es un complemento exclusivo de Handlebars, no disponibles en Mustache. El ayudante condicional es útil para evitar la visualización de datos si el valor de datos está vacía. Como ejemplo, vamos a eliminar el valor de nuestros datos de age.

[js]

var dataSource = {
&amp;quot;name&amp;quot;: &amp;quot;Joe Bloggs&amp;quot;,
&amp;quot;age&amp;quot;: &amp;quot;&amp;quot;,
&amp;quot;from&amp;quot;: &amp;quot;United Kingdom&amp;quot;
}

[/js]

Utilizamos el ayudante condicional de la siguiente manera. A medida que el valor de la edad no está presente, no vamos a mostrar la línea que dice I’m {{age}},

[js] {{#if age}}I’m {{age}},{{/if}} [/js]

En los navegadores, se representará la línea de arriba.

valor vacio

Además, Handlebars también tomara a los datos comovacío si el valor se especifica explícitamente con: undefined o false.

Bucles ó Ciclos

Handlebars también soporta Bucles ó Ciclos. Como cualquier otro lenguaje de programación, se utiliza para iterar una serie de objetos. En este momento sólo tenemos un objeto que contiene tres líneas de datos . Vamos a ampliar nuestro ejemplo con dos objetos más, justo así:

[js]

[/js]

Como ahora tenemos más de un objeto . Nuestra plantilla actual ya no funcionará para representar estos datos en la plantilla. En este caso , debemos utilizar Handlebars Loop, envuelva nuestra plantilla dentro de {{#each}} … {{/each}}. También podemos cambiar la plantilla si es necesario.

En este ejemplo , vamos a mostrar estos datos en una lista:

[js]

&amp;lt;script id=&amp;quot;template&amp;quot; type=&amp;quot;text/x-handlebars-template&amp;quot;&amp;gt;
&amp;lt;ul&amp;gt;
{{#each this}}
&amp;lt;li&amp;gt;Hi, My name is {{{name}}}. {{#if age}}I&amp;amp;#039;m {{age}},{{/if}} and I&amp;amp;#039;m from {{from}}&amp;lt;/li&amp;gt;
{{/each}}
&amp;lt;/ul&amp;gt;
&amp;lt;/script&amp;gt;

[/js]

Este es el resultado que vamos a ver en los navegadores.

ciclos con handlesbars

Ejemplo Practico

Ahora vamos a implementar esta librería en un ejemplo real. Esta vez queremos mostrar un perfil de Forrst, un centro para los diseñadores y desarrolladores. Forrst proporciona un método simple para recuperar sus datos. En nuestro caso, podemos utilizar {username} para recuperar un perfil de usuario. Vamos a conseguir algo similar a estos datos a continuación.

Nota: los datos reales son demasiadamente largos. Así que omitiremos algunos de ellos para que sea más corto.

[js]

var forrstProfile = {
&amp;quot;id&amp;quot;: 24606,
&amp;quot;username&amp;quot;: &amp;quot;jimmyliu&amp;quot;,
&amp;quot;name&amp;quot;: &amp;quot;Jimmy Liu&amp;quot;,
&amp;quot;url&amp;quot;: &amp;quot;http:\/\/forrst.com\/people\/jimmyliu&amp;quot;,
&amp;quot;likes&amp;quot;: &amp;quot;11&amp;quot;,
&amp;quot;followers&amp;quot;: &amp;quot;10&amp;quot;,
&amp;quot;following&amp;quot;: &amp;quot;2&amp;quot;,
&amp;quot;photos&amp;quot;: {
&amp;quot;medium_url&amp;quot;: &amp;quot;https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=75&amp;amp;d=https:\/\/forrst.com\/assets\/images\/default_75.jpg&amp;quot;,
&amp;quot;small_url&amp;quot;: &amp;quot;https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=45&amp;amp;d=https:\/\/forrst.com\/assets\/images\/default_45.jpg&amp;quot;,
&amp;quot;thumb_url&amp;quot;: &amp;quot;https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=25&amp;amp;d=https:\/\/forrst.com\/assets\/images\/default_25.jpg&amp;quot;
},
&amp;quot;bio&amp;quot;: &amp;quot;&amp;lt;p&amp;gt;A graphic and web designer based in Cupertino, California. Follow me on Twitter &amp;lt;a href=\&amp;quot;http:\/\/twitter.com\/jimmyliu\&amp;quot;&amp;gt;&amp;lt;\/a&amp;gt;&amp;lt;a href=\&amp;quot;\/people\/jimmyliu\&amp;quot;&amp;gt;@jimmyliu&amp;lt;\/a&amp;gt;&amp;lt;\/p&amp;gt;\n&amp;quot;,
&amp;quot;is_a&amp;quot;: &amp;quot;developer &amp;amp; designer&amp;quot;,
};

[/js]

Ahora pondremos los datos en una plantilla:

[html]

&amp;lt;div id=&amp;quot;forrst&amp;quot; class=&amp;quot;forrst-profile&amp;quot;&amp;gt;
&amp;lt;script id=&amp;quot;forrst-profile-template&amp;quot; type=&amp;quot;text/x-handlebars-template&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;profile&amp;quot;&amp;gt;
&amp;lt;figure class=&amp;quot;avatar&amp;quot;&amp;gt;
&amp;lt;img src=&amp;quot;{{photos.medium_url}}&amp;quot; alt=&amp;quot;&amp;quot;&amp;gt;
&amp;lt;/figure&amp;gt;
&amp;lt;div class=&amp;quot;person&amp;quot;&amp;gt;
&amp;lt;h3 class=&amp;quot;person-name&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;{{url}}&amp;quot;&amp;gt;{{name}}&amp;lt;/a&amp;gt;&amp;lt;/h3&amp;gt;
&amp;lt;div class=&amp;quot;person-bio&amp;quot;&amp;gt;{{{bio}}}&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;social-count&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;social-item social-posts&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;heading&amp;quot;&amp;gt;Posts&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;counts&amp;quot;&amp;gt;{{posts}}&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;social-item social-followers&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;heading&amp;quot;&amp;gt;Followers&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;counts&amp;quot;&amp;gt;{{followers}}&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;social-item social-following&amp;quot;&amp;gt;
&amp;lt;div class=&amp;quot;heading&amp;quot;&amp;gt;Following&amp;lt;/div&amp;gt;
&amp;lt;div class=&amp;quot;counts&amp;quot;&amp;gt;{{following}}&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;/script&amp;gt;
&amp;lt;/div&amp;gt;

[/html]

Ahora compilaremos:

[js]

var template = $(‘#forrst-profile-template’).html();
var compile = Handlebars.compile(template);
var result = compile(forrstProfile);
$(‘#forrst’).html(result);

[/js]

Con un par de líneas de CSS, podemos lograr un resultado bastante presentable. En el siguiente enlace encontraras la plantilla funcional.