Uso de handlebars

En esta pequeño tutorial veremos un ejemplo básico del uso de handlebars, que nos permita descubrir y entender las principales partes implicadas en el trabajo con este motor de plantillas del lado cliente, que se caracteriza por no añadir prácticamente lógica funcional a las plantillas, centrándose en al semántica.

Los principales elementos en el trabajo con Handlebars son:

• Un contexto: conjunto de datos que serán aplicados sobre la plantilla para obtener esa salida final.
• Una plantilla: fragmento de HTML con elementos especiales (denominados expresiones) que serán reemplazados con los datos finales a la hora de convertir la plantilla en la salida final para el navegador.
• La librería: que nos permite compilar la plantilla para posteriormente aplicarle el contexto que producirá la salida final para le navegador.

Veamos uno a uno el uso de éstos elementos para lograr el objetivo que no es otro que simplificar al máximo la generación de contenido HTML a partir de un conjunto de datos con carácter dinámico.

El contexto

Como decíamos el contexto es el conjunto de datos que permitirá crear a partir de la plantilla un resultado de salida específico, este contexto puede ser un elemento simple o complejo, ya que handlebars permite acceder a propiedades en objetos anidados a través de sus denominados «nested paths«.

var data = {
    usuarios: [
        {
            nombre: 'Marcos',
            puntos: 1254
        },
        {
            nombre: 'Carlos',
            puntos: 1157
        },
        {
            nombre: 'Mariano',
            puntos: 0
        },
        {
            nombre: 'Jose Luis',
            puntos: 0
        }
    ]
};

La plantilla

La plantilla normalmente es un fragmento de HTML que incluye elementos adicionales conocidos como expresiones. Estas expresiones se evaluarán al aplicar el contexto para generar el resultado final. Para incluir una plantilla handlebars en nuestro proyecto empleamos la etiqueta <script>  con un valor específico para el atributo type  y en su interior definimos el HTML que queremos emplear como plantilla.

<script id="user-template" type="text/x-handlebars-template">
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Usuario</th>
                    <th>Puntuación</th>
                </tr>
            </thead>
            <tbody>
                {{#each usuarios}}
                <tr>
                    <td>{{obtenerRanking}}</td>
                    <td>{{nombre}}</td>
                    <td>{{puntos}} puntos.</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </script>

En la plantilla podemos observar los mecanismos de interacción con el contexto, a través de las expresiones encerradas entre llaves. Si nos fijamos además disponemos de alguna funcionalidad adicional como #each  para recorrer un array (se denominan built-in helpers), aunque en el caso de este motor de plantillas son muy pocas ya que precisamente se centra solo en la semántica, y no quiere «engordar» con funcionalidad prefabricada y lógica de aplicación.

La plantilla anterior, básicamente lo que haría es recorrer la lista de usuarios que alberga el array usuarios  y por cada elemento de dicho array, mostraría la posición, el nombre y los puntos. Se aprecia como nombre  y puntos  son propiedades de cada objeto del array, sin embargo se ha hecho uso de un helper personalizado denominado obtenerRanking  que lleva el control de posición en cada iteración del bloque #each .

En realidad Handlebars cuenta con la variable {{@index}}  dentro de un bloque #each , pero esta comienza en 0 por lo que se ha hecho uso de un helper personalizado para lograr comenzar en 1, y de paso añadir este elemento tan necesario en el uso de Handlebars en el mismo.

La librería

La inclusión de la librería se puede hacer desde una CDN de entre las existentes (por ejemplo cdnjs.cloudflare.comcdnjs.cloudflare.com) o descargándola desde el sitio oficial (handlebarsjs.com) para usarla localmente. Como en otras ocasiones, puede ser recomendable la combinación de ambos métodos para lograr optimizar la carga de la misma, con un código como el siguiente:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
    <script>window.Handlebars || document.write('<script src="js/vendor/handlebars-v4.0.5.js">\x3C/script>');</script>

El ejemplo en funcionamiento

Para ver este ejemplo funcionando, podéis hacer uso del proyecto en GitLab en el que se ha basado este tutorial, que está accesible simplemente accediendo a: https://gitlab.com/qmarcos/handlebars-basics

Aprendiendo a usarlo online

Para ver en acción y poder probar este motor sin ni siquiera requerir una instalación local, existe un recurso muy interesante que nos permite jugar con la mecánica del mismo empleando todos los elementos que pueden necesitarse: plantilla, contexto, helpers… Este recurso se encuentra en http://tryhandlebarsjs.com

Referencias

A continuación se recogen una serie de referencias relevantes para el aprendizaje básico de Handlebars, así como la documentación oficial.

• http://handlebarsjs.com/
• http://code.tutsplus.com/tutorials/an-introduction-to-handlebars–net-27761
• http://blog.teamtreehouse.com/getting-started-with-handlebars-js
• http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
• http://blog.teamtreehouse.com/handlebars-js-part-3-tips-and-tricks
• http://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/