Mustache.js: Sistema de Templates

Bueno, luego de haber leído la lectura "CONEXIÓN A API’S: PROBANDO GITHUB API V3.0" debiste haberte preguntado sobre como se manejaba el sistema de plantillas mustache.js, esta sera una lectura corta en donde explicare como manejar este simple sistema de plantillas primero explicando el por que debemos usarlos.

Normalmente cuando creamos apps en donde hacemos solicitudes y a partir de estas mostramos el contenido, no podemos llenarnos de código jQuery o JavaScript y cadenas largas en donde debemos agregar variables y texto que nos confunden y es aquí en donde entra el problema sobre como manejarlos y es donde entran los sistemas de templates.

En este caso yo use Mustache.js para la elaboración de la lectura antes mencionada y a petición de unos alumnos para explicar mustache.js hago esta lectura.

Entonces, primero debemos tener claro que en mustache tenemos dos posturas, una sera el template y la otra sera la vista, en la vista tendremos un objeto con variables que identificaran los datos que añadimos en el template, y el template solo sera el formato con el que se mostraran las cosas.

view = {
    name : "Mejorando.la",
    url : "http://mejorando.la"
}

El template lo haremos como simple código HTML solo que en el lugar donde queremos colocar una variable la colocaremos entre mustaches {{ variable }}.

template = "<a href="{{url}}"><h1>{{name}}</h1></a>";

Ahora creamos una variable output en donde guardaremos el resultado del render y colocaremos el render de mustache, primero el template y luego la vista.

output = Mustache.render(template,view);

Ahora si queremos colocar el resultado en la pagina lo podrás hacer con jQuery de la siguiente manera:

$('#content').html(output);

Listo :)

Nota: Recuerda descargar mustache.js de su repositorio oficial y agregarlo a tu HTML antes de tu documento de JavaScript para que todo corra correcto.