Una introducción a {{ mustache }}

Hoy vamos a explorar un tema que puede sonar un poco peludo, pero no te preocupes, no estamos hablando de bigotes reales. En lugar de eso, vamos a sumergirnos en el mundo de Mustache, un procesador de plantillas que simplificará enormemente la tarea de generar contenido a través de código.

¿Qué es Mustache?

Imagina que estás organizando una fiesta sorpresa para un amigo. Tienes una invitación genérica que dice "Querido {{nombre}}, estás invitado a mi fiesta...". En lugar de escribir manualmente cada invitación, simplemente reemplazas {{nombre}} con el nombre de cada amigo. Eso es básicamente lo que hace Mustache, pero con código.

Mustache se utiliza para generar contenido basado en datos y una plantilla. En otras palabras, es una herramienta que te permite crear una especie de "molde" para el contenido que quieres generar, y luego llenar ese molde con diferentes datos.

¿Por qué usar Mustache?

Mustache es "logic-less", lo que significa que se centra en la presentación de los datos y no la lógica que tienen estos detrás. Esto puede hacer que sea más fácil de entender y usar para las personas que no son programadores.

Además, Mustache es muy flexible y se puede implementar con varios lenguajes de programación.

¿Cómo funciona Mustache?

Para empezar a trabajar con Mustache, primero necesitas importarlo. Si estás trabajando con JavaScript, puedes hacerlo con npm:

npm install mustache --save

Una vez importado, el siguiente paso es crear una plantilla. Las plantillas de Mustache son simplemente texto que contiene distintas variables, que se indican con llaves dobles {{}} (justamente el nombre de la librería proviene de que las llaves se asemejan a un bigote).

Por ejemplo, podrías tener una plantilla de un post para un blog que se vea así:

<div class="post">
  <h2>{{titulo}}</h2>
  <p>{{contenido}}</p>
  <p>Publicado por: {{autor}}</p>
</div>

Cada una de las variables ({{titulo}}, {{contenido}}, {{autor}}) se reemplazará con los datos correspondientes cuando se renderice la plantilla.

Para llenar la plantilla con datos, necesitas proporcionar un objeto que contenga los valores que quieres insertar. Por ejemplo:

const data = {
  titulo: "Introducción a la programación en Python",
  contenido: "Python es un lenguaje de programación...",
  autor: "Juan López"
};

Finalmente, puedes usar Mustache para combinar la plantilla con los datos y generar el HTML final:

const output = Mustache.render(template, data);

Variables sin escapar

En Mustache, puedes utilizar variables sin escapar agregando llaves triples a las variables.

Para poner un ejemplo, supongamos que tenemos una propiedad nombre que contiene el valor <b>John Doe</b>. Queremos mostrar el nombre sin escapar en nuestra plantilla. Podemos hacerlo de la siguiente manera:

<div>
  Nombre: {{nombre}} <br>
  Nombre sin escapar: {{{nombre}}}
</div>

En este caso, la primera línea {{nombre}} mostrará el nombre escapado. Sin embargo, en la segunda línea {{{nombre}}}, el resultado sería el texto en negrita, ya que las etiquetas HTML son interpretadas y mostradas tal como están.

Secciones

Las secciones se utilizan para representar bloques de repetición (listas) y para condicionales booleanos (comprobar si una variable no está vacía o no es falsa). Para indicar la apertura de una sección, se representa con el nombre de variable encerrado entre llaves dobles y precedido por un numeral (#). Y para indicar el cierre, lo mismo pero la variable precedida de una barra (/).

Por ejemplo, para representar una sección condicional:

{{#tieneDatos}}
Esto no se mostrará si la variable 'tieneDatos' está vacía o devuelve un valor falso.
{{/tieneDatos}}

Para representar una lista:

<ul>
{{#amigos}}
  <li>{{nombre}} es mi amigo.</li>
{{/amigos}}
</ul>

En este caso, 'amigos' es una lista de objetos con la propiedad nombre, y se generará un elemento <li> para cada amigo, o si la lista está vacía, no se mostrará nada.

Secciones invertidas

Las secciones invertidas se muestran si la variable no existe, es falsa o es una lista vacía. Una sección invertida comienza con un signo de intercalación(^) y termina con una barra (/). Por ejemplo:

{{^amigos}}
  <p>No tengo amigos.</p>
{{/amigos}}

En este caso, si 'amigos' es una lista vacía o no existe, Mustache generará el párrafo "No tengo amigos".

Comentarios

Los comentarios en Mustache se representan con un signo de exclamación (!). Por ejemplo:

{{! Esto es un comentario }}

Los comentarios no se renderizan en la salida final.

Plantillas anidadas

Las plantillas anidadas en Mustache permiten incluir una plantilla dentro de otra, lo que puede ser útil para reutilizar partes de una plantilla o para dividir una plantilla grande en partes más manejables. Se utiliza el signo mayor que (>) para incluir la plantilla.

Por ejemplo, teniendo una plantilla de comentario:

<div class="comentario">
  <p>{{texto}}</p>
  <p>Publicado por: {{autor}}</p>
</div>

Se puede incluir en una plantilla padre de post:

<div class="post">
  <h2>{{titulo}}</h2>
  <p>{{contenido}}</p>
  <div class="comentarios">
    {{#comentarios}}
      {{> comentario}}
    {{/comentarios}}
  </div>
</div>

La plantilla incluida utiliza el mismo contexto de datos que su plantilla principal.

Como hemos visto, Mustache es una herramienta poderosa y flexible para generar contenido dinámico. Ya sea que estés creando un blog, una aplicación web o cualquier otro proyecto que requiera generar contenido a partir de datos, Mustache puede hacer que tu vida sea mucho más fácil.

Espero que este artículo te haya dado una buena introducción a Mustache y que estés emocionado por probarlo en tus propios proyectos.

Si quieres conocer más a profundidad a Mustache, puedes leer la documentación oficial.