Crear plantilla HTML con Mustache.js

Muchas aplicaciones usan arquitectura MVC para separar la lógica de negocio de la capa de presentación. A pesar de esto, aplicaciones complejas que tienen mucha manipulación HTML con JavaScript, son difíciles de mantener. En estos escenarios, se pueden utilizar sistemas de plantillas para incrementar la reutilización y mejorar el manejo de las vistas. Las plantillas HTML desacoplan la definición de la interfaz gráfica (HTML) de los datos. Mustache es muy popular por su sintaxis y rapidez de
renderizado. Además, tiene soporte para muchos lenguajes, por lo que no hay que elegir un sistema de plantillas distinto para el código de servidor.


Mustache.js
Mustache es un sistema de plantillas sin lógica, desarrollado para varios lenguajes como JavaScript, Ruby, Python, .NET, PHP, etc. Se puede descargar desde la página oficial en GitHub. Provee plantillas y vistas para crear plantillas dinámicas. 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”. Puede ser usado en cualquier lugar donde utilices JavaScript (navegadores, entornos node.js y vistas CouchDB). Vamos a ver un ejemplo.

Primero incluimos el archivo mustache.js en el documento. Después creamos un objeto JSON llamado vista, que tiene un sitio y una url. Creamos una función que llama al método render de Mustache, al cual se le pasa una plantilla y la vista que llenará dicha plantilla. Finalmente llamamos al método cargar datos una vez que el documento está listo. La plantilla tiene tags, que indican con llaves dobles.
Tipos de plantillas
Hay varios métodos para definir plantillas en Mustache. El primer método es el que vimos en el ejemplo anterior, que se considera plantilla en línea, ya que se declara directamente al momento de utilizar el método render. Este método evita que reutilicemos las plantillas. Puede hacerse una analogía con los estilos CSS definidos directamente en la tag de un elemento utilizando el atributo style.
Plantillas como scripts inline
Se puede definir una plantilla dentro de una tag <script> incluida en el documento HTML. Para prevenir que el navegador ejecute el código dentro de la plantilla, hay que modificar el tipo MIME a algo que no sea text/javascript. Los tipos comunes son: text/html, text/template y text/mustache. En el ejemplo anterior quedaría:

De esta forma las plantillas se guardan aparte y se cargan dinámicamente cuando se requieren. Este método incrementa la posibilidad de reutilizar las plantillas; sin embargo, limita las plantillas a la página en la cual se declaran. Si tenemos muchas páginas, debemos de definir nuevamente las plantillas en cada una de ellas.

Plantillas como snippets HTML externos
Utilizando jQuery, podemos cargar porciones de otro archivo, las cuales pueden contener las plantillas para cargar a través de Mustache. Utilizando la función load() de jQuery, podemos llamar a un archivo en el cual tengamos definidas las plantillas, para así optimizar la reutilización de código.

 

Al utilizar la función load() no podemos tener las plantillas dentro de una tag script, ya que la función ejecutaría dicho script, en lugar de devolverlo. Lo que hacemos en el ejemplo, es dejar la porción de documento que obtenemos de la página plantilla.html en un div que no mostramos, para luego utilizarlo como plantilla.
Obtener los datos de forma externa
Ya vimos como podemos quitar las plantillas de la página para poder reutilizar código, ahora nos faltaría obtener los datos desde otro lugar que no fuera la misma página. Para lograrlo podemos utilizar la función getJSON() de jQuery, la cual es una forma abreviada de de la función ajax().

 

facebook Crear plantilla HTML con Mustache.jstwitter Crear plantilla HTML con Mustache.jsgoogle Crear plantilla HTML con Mustache.jsdiggit Crear plantilla HTML con Mustache.jspinterest Crear plantilla HTML con Mustache.jslinkedin Crear plantilla HTML con Mustache.jsprint Crear plantilla HTML con Mustache.jsemail Crear plantilla HTML con Mustache.jsSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.