lunes, 19 de octubre de 2015

Primeros pasos con Mustache

Mustache es un sistema de plantillas sin lógica, (Traducción literal de la descripción que hacen de si mismos en el sitio web), lo que significa que a diferencia de otros sistemas de plantillas para JavaScript este no define estructura de control, sino que trabaja definiendo etiquetas.

Es un gran adelanto usar un sistema de plantillas. Separar la "lógica de negocios" de la presentación siempre es un gusto, pese a los inconvenientes que pueda presentar en cuánto a rendimiento. Por otra parte, no es díficil aprender a usar Mustache, y su sencillez su no es problema para las capacidades que presenta:

Su uso puede resumirse de la siguiente forma:

  • Se crea una plantilla a usar sobre como han de tratarse los datos, tomando como referencia un objeto JSON. En mi caso, mi JSON es un array cuyos datos son los que necesito mostrar:

<tbody id="respuesta">
    <script id="respuesta-template" type="text/x-custom-template">
        {% verbatim %}
            {{#datos}}
                {{#.}}
                    <tr id="{{uid}}"><td>
                        <p class="col-md-12"><b>{{ cn }}</b></p>
                        <p class="col-md-12 col-sm-12 small">{{ #title }} {{ title }} en {{ /title }}{{ #ou }}{{ ou }} de {{ /ou }}{{ establecimiento }}</p>
                        <p class="col-md-6 col-sm-12 small">{{ mail }}</p>
                        <p class="col-md-6 col-sm-12 small">{{ telephoneNumber }</p>
                    </td></tr>
                {{/.}}
            {{/datos}}
        {% endverbatim %}
    </script>
</tbody>

  • El objeto JSON va definido, datos más, datos menos, de la siguiente forma:

{
    "datos": [
        {
            "cn": "AdaCruz",
            "mail": "acruz@salud.gob.sv",
            "uid": "acruz"
        },
        {
            "cn": "Adalberto Chavez",
            "mail": "achavez@salud.gob.sv",
            "uid": "achavez"
        }
    ],
    "mensajeError": null
}
La idea es que la etiqueta {{#datos}} permite acceder no a los datos de la clave en el objeto JSON, sino más bien a la funcionalidad por defecto que siendo un array es la de recorrerlo. Lo de {{#.}} es un extraño workaround ya que parece que el objeto JSON es recibido seccionado.
Por otra parte {{#.}}, podría ser útil para recorrer un objeto JSON que consista en una seria de array sin índice alguno.

Lo demás, es que cuando estemos recorriendo cada objeto json que compone el array tendremos el dato que cada índice contiene.

Luego, vale la pena mencionar el uso que se le ha vuelto a dar a la etiqueta de tipo {{ #etiqueta }} en el caso del segundo bloque:
<p class="col-md-12 col-sm-12 small">{{ #title }} {{ title }} en {{ /title }}{{ #ou }}{{ ou }} de {{ /ou }}{{ establecimiento }}</p>
Las etiquetas de este modo funcionan como un condicionante. Lo que este dentro de ellas no será mostrado a menos que haya contenido que mostrar. En este caso particular, lo he usado para construir la frase según haya uno u otro contenido, pero supongo que será posible enmarcar toda una etiqueta HTML si se antoja necesario.
  • Por último, el código que realiza todo el trabajo de presentación va de la siguiente forma:
var template = $('#respuesta-template').html();
Mustache.parse(template);
var contenido = Mustache.render(template, respuesta);
pmostrarError(respuesta);
pmostrarMensaje(respuesta);
$("#respuesta tr").remove();
$("#respuesta").append(contenido);

El resultado viene quedando de la siguiente forma:
Los íconos son parte del proyecto Material Icons de Google  y omití las etiquetas de imagen para hacer legible al ejemplo 

Tener en cuenta que este intento de manual ha obviado muchas cosas: El que este usando Bootstrap y JQuery por ejemplo.

Fuentes:
Defining a HTML "template" to append using JQuery
mustache.js - Logic-less {{mustache}} templates with JavaScript
Mustache.js + jQuery: what is the minimal working example ?
How to use Mustache with JS / jQuery – a working example

No hay comentarios:

Publicar un comentario

Otros apuntes interesantes

Otros apuntes interesantes