MustacheJS te permitirá poder leer fácilmente un archivo JSON para poder crear Templates con JavaScript, la Sintaxis de MustacheJS es bastante sencilla, fácil de recordar y muy útil.

Herramientas Necesarias para este Tutorial:

Video:

Entrada de Blog:

Primero creamos nuestro titulo de nuestro proyecto, no hay nada de especial aún, es solo un h1 con la clase de Bootstrap text-center

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Si estas utilizando un archivo html, antes de continuar es necesario que agregues el archivo de MustacheJS, en index.html agrega:


<script src="js/mustache.min.js"></script>

 

El archivo JSON que utilizaremos para este curso lo podrás encontrar aquí o puedes copiarlo a continuación.


{
	"autos": [
    {"marca":"Ford", 
     "modelo":"Focus", 
     "precio": "$25,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Excelente Trato",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "Eléctrico"
     ]
    },
    {"marca":"Chrysler", 
     "modelo":"300C", 
     "precio": "$30,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Excelente Estado, Como Nuevo",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "Eléctrico"
     ]
    },
    {"marca":"Dodge", 
     "modelo":"Charger", 
     "precio": "$40,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Excelente Manejo y Motor",
     "equipo": [
        "Aire Acondicionado",
        "Eléctrico",
        "8 Cilindros"
     ]
    },
    {"marca":"Chevrolet", 
     "modelo":"Camaro", 
     "precio": "$40,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Excelente Estado, Como Nuevo",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "8 Cilindros"
     ]
    },
    {"marca":"Ford", 
     "modelo":"Mustang", 
     "precio": "$40,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Potente Motor V8",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "8 Cilindros"
     ]
    },
    {"marca":"BMW", 
     "modelo":"3", 
     "precio": "$30,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Máximo Lujo",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "Eléctrico"
     ]
    },
    {"marca":"Chevrolet", 
     "modelo":"Malibu", 
     "precio": "$30,000", 
     "imagen": "http://placehold.it/350x250", 
     "descripcion" : "Motor económico ",
     "equipo": [
        "Aire Acondicionado",
        "Autómatico",
        "Eléctrico"
     ]
    }
]}

 

Como puedes ver, haremos un pequeño inventario para una agencia de autos utilizando este JSON. Si nunca has utilizado JSON, es bastante fácil de entender, tenemos un Objeto llamado autos, con un array de 7 elementos donde viene listado cada automóvil, dentro de cada array de cada automóvil, tenemos distintos elementos del array como marca, modelo, precio, fotografía y descripción. Para poder recorrer este JSON con Mustache JS y jQuery agregamos un código como el que tenemos a continuación.

    <div class="wrap-titulo">
            <h1 class="text-center">Inventario de <span> Autos </span></h1>
             <script id="autoTPL" type="text/template">
                 
                     
            </script>
    </div>      

      

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

En este ejemplo tomamos el JSON y lo leemos utilizando la función de jQuery, getJSON, le pasamos los datos como parametro, ya dentro creamos una variable llamada template, que agregamos a nuestro index.html, puedes ver que el script es muy parecido a un bloque de javascript, solo que en lugar de ser text/javascript es text/template.

Por último asignamos a la variable data un método de Mustache. Llamado to_html, que toma 2 parametros, el template y los datos de nuestro JSON.

Agregamos lo siguiente:

$(function() {
	$.getJSON('https://dl.dropboxusercontent.com/u/67283941/data.json', function(data) {
	    var template = $('#autoTPL').html();
	    var info = Mustache.to_html(template, data);
         $('#inventarioListado').html(info);
	});
});

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

En el código anterior hemos agregado al HTML un div con el id de inventarioListado, en la parte de javascript, utilizamos el selector de jQuery para tomar ese selector y utilizamos la función .html, donde le pasamos la variable que hemos creado anteriormente, de esta forma el template, y los datos se enviaran al div con el id “inventarioListado” de forma dinamica. Si revisamos el tab de Result, podemos ver que nuestro HTML sigue vacío.

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Y esto pasa porque nuestro Template esta vacío, no le hemos agregado nada para que imprima, y Mustache provee una forma muy sencilla de emular un for en Javascript para poder recorrer todos los elementos. Agregamos lo siguiente al template en el archivo HTML:

    <div class="wrap-titulo">
            <h1 class="text-center">Inventario de <span> Autos </span></h1>
            <div id="inventarioListado"></div>
             <script id="autoTPL" type="text/template">
                  {{#autos}}
                         {{marca}}
                  {{/autos}}
                     
            </script>
    </div>      

      

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Y podemos ver en la parte de Result, que ya podemos ver un contenido.

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Debido a que nuestro JSON donde empieza, el objeto se llama autos, rodeamos el nombre del objeto con los signos de llaves {{}} (es por eso que se le llama Mustache).

Al hacer esto {{autos}} lo que estamos haciendo es recorrer todo el objeto de autos, y accedemos a la marca, solo agregando {{marca}}, es importante mencionar que para que esto se imprima, deben ser del mismo nombre que el JSON.

Vamos a agregar un poco de Bootstrap para hacer nuestro Diseño un poco más agradable a la vista y con más campos.

Agregamos al index.html lo siguiente en nuestro template:

    <div class="wrap-titulo">
            <h1 class="text-center">Inventario de <span> Autos </span></h1>
            <div id="inventarioListado"></div>
            <script id="autoTPL" type="text/template">
                <div class="container">
                    <div class="row">
                        {{#autos}}
                              <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                          <img src="{{imagen}}">
                                          <div class="caption">
                                                <h3>{{marca}} {{modelo}}</h3>
                                                <p>{{descripcion}}</p>
                                          </div>
                                    </div>
                              </div>
                        {{/autos}}
                     </div>
                 </div>
            </script>
    </div>      

      

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Agregamos algunas clases en Bootstrap para agrupar en una lista y utilizamos el Grid de Bootstrap, puedes ver que imprimimos la imagen (bueno no hay imagen de los autos pero si otra imagen) igual que como imprimimos la marca de los automoviles, {{imagen}}, {{modelo}}, {{descripcion}} Y Obtenemos el siguiente resultado:

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Si revisamos de nuevo nuestro JSON, podrás ver que hay un elemento llamado equipo que tiene un array con el equipo de cada automovil. Para leer ese array solo agregamos:


<ul class="equipo">
   {{#equipo}}<li>{{.}}</li>{{/equipo}}
</ul>

Como a continuación:

    <div class="wrap-titulo">
            <h1 class="text-center">Inventario de <span> Autos </span></h1>
            <div id="inventarioListado"></div>
              <script id="autoTPL" type="text/template">
                <div class="container">
                    <div class="row">
                        {{#autos}}
                              <div class="col-sm-6 col-md-4">
                                    <div class="thumbnail">
                                          <img src="{{imagen}}">
                                          <div class="caption">
                                                <h3>{{marca}} {{modelo}}</h3>
                                                <p>{{descripcion}}</p>
                                               <ul class="equipo">
                                                {{#equipo}}<li>{{.}}</li>{{/equipo}}
                                                </ul>
                                          </div>
                                    </div>
                              </div>
                        {{/autos}}
                     </div>
                 </div>
            </script>
    </div>      

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Y obtenemos el siguiente resultado:

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Puedes cambiar las rutas de las fotografias en el archivo JSON para agregar fotografías mas reales, el proceso es el mismo.

Antes de finalizar, agregamos un poco de CSS para cambiarle el diseño un poco:

See the Pen Mustache JS Ejemplo by Juan Pablo De la torre Valdez (@jpdelatorre) on CodePen.

Conclusión

Mustache JS te permitirá crear Templates rápidamente desde un archivo JSON, la ventaja de utilizar un archivo JSON es que puede alimentar una página web, web app o una aplicación móvil, por lo tanto utilizar JSON es muy común hoy en día en muchos lugares de trabajo.

En este pequeño tutorial aprendiste lo básico para poder comenzar a Utilizar Mustache JS.

Descargar el Proyecto Completo