USO DE TEMPLATES HANDLEBARS CON ZEPTO. MITAD I. SINTAXIS, ITERACIONES Y CONDICIONALES

< script src=”my own” title=”uso de templates handlebars con zepto” >

Bigotes con estilo!!!

Bigotes con estilo!!!

¿Un post con bigotes al comienzo? Suena interesante… :mrgreen:

Handlebars es una libreria Javascript que proporciona un sistema de templates semánticos HTML que se pueden [pre]compilar y usar transversalmente en cualquier aplicación web. Está basado en el otrora sistema de templates multilenguaje Mustache, por lo que sus funcionalidades son similares (en algunas cosas) a ese sistema. Adicionalmente, incluye una serie de funciones, helpers y bloques semánticos, entre otras especias que hacen de Handlebars una opción interesante para construir templates en un desarrollo front-end.

Algunas de las funcionalidades más interesantes de esta librería, he decidido incluirlas en un solo post, pero como quedaba muy muy largo ( 🙄 ) lo separé en dos mitades:

  1. Mitad I (este post): Sintaxis, Bloques de Iteraciones y Bloques Condicionales.
  2. Mitad II: Rutas a Objetos, Registro de helpers, y Templates Parciales.

Adicionalmente, usaré Zepto para insertar el código HTML, y para el mocking de los datos del template, usaré Faker.js, una librería que no necesita mucha presentación puesto que hablé de ella en un post anterior XD . ¡Empecémos ya!

ESTRUCTURA INICIAL

El código que vamos a usar es una sóla página con la inclusión de las librerías y la data. Primero presento el código y luego explico de que va en cada línea:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo Handlebars</title>
</head>
<body>
    <h1>Lista de usuarios con Handlebars</h1>
    <div class="template"></div>

    <!-- Templates e instancia de Javascript -->    
    <script src="handlebars-v3.0.0.js"></script>
    <script id="userlist" type="text/x-handlebars-template">
            {{#each userList}}
                <div style="border: 1px solid 
                {{!-- Comentario dentro del template --}}
                {{!-- Escrito así para mayor legibilidad del código --}}
                {{#if enabled}}
                    green {{!-- Verde si usuario está habilitado --}}
                {{else}}
                    red {{!-- Rojo si usuario está deshabilitado --}}
                {{/if}}
                ; width: 350px; height: 150px; margin: 10px; float: left;">
                    <h2>{{name}}</h2>
                    <p><strong>{{address}}</strong></p>
                    <p><em>Teléfono: {{phone}}</em></p>
                </div>
            {{/each}}
    </script>
    <script src="zepto.js"></script>
    <script src="event.js"></script>
    <script src="faker.min.js"></script>
    <script>
        $(function(){
            //español
            faker.locale = 'es';

            var listaUsuarios = []; //arreglo de usuarios;

            for (var i = 0; i < 9; i++) {
                //crea un único usuario cada vez que se declara la variable
                var usuario = {
                    name: faker.name.findName(),
                    address: faker.address.streetAddress(),
                    phone: faker.phone.phoneNumber(),
                    enabled: faker.random.number() ? true : false
                };
                //Se agrega al arreglo de usuarios
                listaUsuarios.push(usuario);
            };             

            //Se encapsula la lista
            var lista = {userList: listaUsuarios};

            //se convierte de semántica Handlebars a HTML plano
            var source = $('#userlist').html(),

            //se compila el template HTML para insertar datos
            template = Handlebars.compile(source);

            //se insertan datos y se añaden al cuerpo HTML
            $('.template').append(template(lista));
        });
    </script>
</body>
</html>

SINTAXIS

Después de descargar la librería, en la línea 12 la incluímos (de forma local, en mi caso). Ignorando todo lo demás (por ahora 😳 ), en la líneas 56, 59 y 62 se hace la magia para compilar el template con la data requerida, obteniendo el código HTML, compilándolo e insertando con Zepto, la data correspondiente, respectivamente, cuando se agrega el template en la sección de nuestra vista que deseamos (en este caso, la línea 9)

Entre las líneas 40 y 50, simplemente se hace un mocking de datos para usar en nuestra vista con Faker.js, asegurándonos, en la línea 36, de que los datos que se van a generar están localizados al español 🙂

Finalmente, entre las líneas 13 y 29, se escribe el template que se va a añadir a nuestra vista principal. Acá es importante usar la convención type="text/x-handlebars-template" para que el navegador no confunda este código con Javascript trocho y mocho y con otros “bloques” dentro del template mismo.

Un “bloque” está delimitado por dos expresiones, una de inicio y una de fin. Las expresiones son interpolaciones de variables o de helpers de Handlebars para diferentes funcionalidades.

BLOQUES DE ITERACIONES

Las líneas 14 y 28 representan un bloque de iteración, el cual no hace más que renderizar los diferentes valores que se encuentran dentro de la propiedad userlist (siempre que dicha propiedad sea un array), encapsulada en la línea 53, y aplicar el bloque interno sobre cada elemento que contenga la propiedad.

BLOQUES CONDICIONALES

En las líneas 18, 20 y 22 se muestra un bloque condicional, el cual consiste en renderizar uno u otro valor dependiendo de si la expresión resultado del bloque {{#if expresion}} evalua a true o a false. En este caso, la propiedad CSS border será green si la variable enabled de la data insertada es true y red si dicho valor es false.

FInalmente, este es el resultado de tanto jaleo (que será completamente diferente si actualizamos la página) ^^’

... y nuestro template arroja esto :D !

… y nuestro template arroja esto 😀 !

Handlebars tiene muchas más funcionalidades que las mencionadas acá, como podrás darte cuenta en su API nada más al ingresar. Nada, ¡feliz bigote! 😉

XD XD XD

XD XD XD

</script>

Anuncios

2 comentarios en “USO DE TEMPLATES HANDLEBARS CON ZEPTO. MITAD I. SINTAXIS, ITERACIONES Y CONDICIONALES

Los comentarios están cerrados.