HANDLEBARS - Iniciando

Handlebars le agrega un poco de lógica al front end. Algo como lo que anteriormente se hacía con JSP o PHP, al tener ciclos y helpers. Se me hace super útil también para internacionalización, pues solo se le pasa un JSON y handlebars reemplaza las cadenas {{cadena}} con los keys que hay en el JSON.

Tiene dos formas de operar, una es compilación en el browser, y la otra es precompilación, para lo que se requiere Node. Vamos a usar la segunda, pues es significativamente más rápido para hacer el render.

De entrada, lo que hemos visto hasta ahora, es poner {{key}} en el HTML, y despues compilarlo, esto genera un archivo JS que se va a incluir en el HTML, y luego en el HTML lo invocas por medio de JavaScript y lo insertas donde lo necesitas.

Lo que hice hoy, fue incluir la semántica de Handlebars, dentro de mi archivo Jade. Al compilar el Jade me deja el HTML con la semantica {{}} y luego compilo el handlebars para obtener el JS.

Primero lo instalamos:

sudo npm install handlebars -g

Y el código que hice en Jade:

section(class='hbox stretch')
    aside(class='aside-sm bg-dark')
        a(href='#',class='nav-brand',data-toggle='fullscreen')
            img(src='images/{{logo}}')
    aside(class='bg-black')

La única intención ahí es de pasarle la imagen del logo, para que sea dinámica, ya compilado por Jade se ve así:

<section class="hbox stretch">
    <aside class="aside-sm bg-dark">
        <a href="#" data-toggle="fullscreen" class="nav-brand">
            <img src="images/{{logo}}"/>
        </a>
    </aside>
    <aside class="bg-black"></aside>
</section>

Y ya teniendo ese HBS, entonces lo compilo con:

handlebars headerLogo.hbs -f headerLogo.js

Para incluír este template en mi código, hice lo siguiente en JavaScript - jQuery:

 var headerLogoTemplate = Handlebars.templates['headerLogo.hbs'];

 var headerLogoData = {logo:"logo.png"};

 var headerLogoHTML = headerLogoTemplate(headerLogoData);

 $('#headerLogo').append(headerLogoHTML);

Donde headerLogo es un tag header de HTML, aunque este último también lo estoy haciendo con JADE.

Al parecer la versión de handlebars que me descargo, la 2.0.0, es medio beta aún, me comenta Linus que hay que usar la 1.3, y esto funciona con Grunt.

También se puede utilizar con Backbone, pero eso lo haré más adelante, primero quiero dominar bien Jade y Handlebars que son mas sencillos, y luego paso a Backbone.

* IMPORTANTE SI SE USA GRUNT

El contrib-handlebars compila con la versión 1.3, por lo tanto, si se va a utilizar Grunt (que es lo mas normal), hay que utilizar la versión del runtime que soporta el contrib, si no, no funciona.

Ejemplo con 1.3, en el JavaScript de la aplicación

var hbs = function (name) {
    return handlebars['./hbs/'+name+'.hbs'];
};

var templates = ['detalles','encabezado'];
    for(var i=0;i<templates.length;i++){
        var hbstemplate = hbs(templates[i]);
        var hbsdata = {};
        var hbshtml = hbstemplate(hbsdata);
        $('#'+templates[i]).append(hbshtml);
    }