Apuntes Tuxianos: 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:

    <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: