Mustache è una libreria JavaScript leggera, facile da usare e altamente flessibile. La sua sintassi minimalista rende semplice la creazione di template HTML dinamici che si adattano a rappresentare diversi insiemi di dati.
Per utilizzare la libreria, è sufficiente includere il file JavaScript nella propria pagina web e definire il template HTML da compilare con i dati. Mustache gestisce il resto, compilando automaticamente il template HTML con i dati forniti.
Ecco un esempio di utilizzo di Mustache per creare il template di una scheda contatti:
<!DOCTYPE html>
<html>
<head>
<title>Scheda contatti</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"></script>
</head>
<body>
<template id="contact-template">
<h1>{{nome}} {{cognome}}</h1>
<p><strong>Email:</strong> {{email}}</p>
<p><strong>Telefono:</strong> {{telefono}}</p>
<h2>Contatti:</h2>
<ul>
{{#contatti}}
<li>{{.}}</li>
{{/contatti}}
</ul>
</template>
<div id="scheda-contatto"></div>
<script>
var template = document.getElementById("contact-template").innerHTML;
var data = {
nome: "Mario",
cognome: "Rossi",
contatti: ["06-27091973", "555-123456", "mario.rossi@gmail.com"]
};
var html = Mustache.render(template, data);
document.getElementById("scheda-contatto").innerHTML = html;
</script>
</body>
</html>
In questo esempio, il template HTML definisce le sezioni per il nome, il cognome, nonché un elenco di contatti. Gli attributi scalari sono mappati con il placeholder {{ … }}. La sezione con l’elenco contatti è creata utilizzando la sintassi Mustache {{#contatti}} … {{/contatti}} che indica che la sezione deve essere ripetuta per ogni elemento nell’array contatti.
Per definire l’i-esimo elemento all’interno della lista si usa l’espressione {{.}}. Se nell’elenco ci fossero oggetti, allora si utilizzerebbe la classica espressione con il placeholder per gli attributi scalari.
Se si vuole invece individuare la proprietà di un oggetto annidato, è sufficiente utilizzare la dot notation di Javascript per i placeholder.
Inoltre è possibile definire delle funzioni nell’oggetto javascript e richiamarle come proprietà composte
Ad esempio
data = {
nome: "Mario",
cognome: "Rossi",
contatti: ["06-27091973", "555-123456", "mario.rossi@gmail.com"],
nomecompleto: function () {
return this.nome + " " + this.cognome;
}
};
nel template potremmi riferisci alla funzione con {{nomecompleto}}.
Il codice JavaScript dell’esempio definisce un oggetto data che contiene i dati da utilizzare per compilare il template HTML. La funzione Mustache.render() compila il template con i dati forniti, restituendo l’HTML compilato. Infine, il codice JavaScript sostituisce il contenuto del div “scheda-contatto” con l’HTML compilato.
La libreria è utilissima quando dovete renderizzare un contenuto che vi viene fornito da un servizio REST / JSON.