Templates for javascript.
Templates for javascript.

¿Qué es Mustache?

Mustache es un sistema de plantillas sin lógica (logic-less templates) , desarrollado para varios lenguajes como JavaScript, Ruby, Python, .NET, PHP, etc. Provee plantillas y vistas, las vistas contienen los datos a ser incluidos en las plantillas, en formato JSON; las plantillas contienen la presentación. Al ser sin lógica, Mustache no posee condiciones del tipo “if-else” o iteraciones del tipo “for“, aunque tiene etiquetas para crear condiciones o ciclos para mostrar la información.

La principal propiedad de Mustache al igual que otros sistemas de plantillas es que tengamos por un lado los datos (JSON) y por otro la plantilla y que juntando ambos obtenemos un resultado, para mostrar los resultados se indica de la siguiente manera “{{nombre_campo}}”.

¿Cómo funciona?

Realicemos un ejemplo para observar que sencillo es desarrollar una plantilla con Mustache. Lo primero que tenemos que tener en cuenta es como queremos que se presenten nuestros datos en el navegador.

El primer paso es incluir  el archivo”js” de Mustache a nuestro proyecto, como se muestra en el siguiente código:

<script src="mustache.js"></script>
    <script>
        var vista = {
            sitio: "NameSite",
            url: "http://www.site.com"
        };

        function cargarDatos(){
            var datos = Mustache.render("<strong>{{sitio}}</strong> - {{url}}", vista);
            $('#Contenedor').html(datos);
        }

        $( document ).ready(function() {
            cargarDatos();
        });
</script></code>

<code><div id="Contenedor"></div></code><code>

Como observamos en el código anterior tenemos dos partes fundamentales los datos en formato JSON que en este caso es la variable vista, y la plantilla en formato HTML que le es pasado como parámetro a una función de Mustache y que retorna un HTML que puede ser incrustado con JQuery a un elemento como un “div”, y que corresponde al lugar donde se mostraran los datos.

Resultado:

NameSite – http://www.site.com

Por lo general este tipo de plantillas son utilizadas para dar vista a los datos que obtenemos por medio de un servicio web donde realizamos peticiones y obtenemos información en JSON y como podemos ver es fácil su implementación.

Fuente:

Mustache.js

Aurelio Cuautle Reyes

Aurelio Cuautle Reyes

Lic. Ciencias de la Computación FCC-BUAP, desarrollador por pasión, emprendedor, algo loco y padre primerizo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar