Cos’è la libreria Mustache

Mustache.js consente di generare dei template, può essere usata con l’HTML, per configurare file e codice sorgente. Questo sistema di template consente di ampliare il numero di tag messi a disposizione degli sviluppatori. Mustache è una libreria JavaScript e introduce una forte separazione della logica di un applicativo dalla presentazione, è impossibile implementare della logica all’interno di un template Mustache.
In Mustache.js sono presenti solo tag, per questo motivo viene definito logic less (senza logica) in quanto non possiede istruzioni di controllo come if, else e loop (anche se sono simulabili con i tag di sezione e i lambda).

Per installare Mustache.js bisogna utilizzare NPM da linea di comando e scrivere:

  npm install mustache --save

Oppure installarlo tramite Bower:

  bower install --save mustache

MUstache logo

Sul sito ufficiale viene fornita una demo della libreria, ecco un esempio di come utilizzare Mustache.js:

    var view = {
        title: "Joe",
        calc: function () {
            return 2 + 4;
        }
    };

    var output = Mustache.render("{{title}} spends {{calc}}", view);

In questo esempio la funzione Mustache.render prende in ingresso due parametri:

  • I template mustache (“{{title}} spends {{calc}}“);
  • Un oggetto view che deve contente i dati e il codice da reindirizzare sul template.

Mustache è disponibile per moltissimi linguaggi tra cui Java, C++, PHP, JavaScript, Python, Ruby, Scala e Swift. Esistono molti plugin integrabili in Mustache.js grazie a Rake come jQuery, MooTools, ecc. Tra le aziende che utilizzano Mustache troviamo LinkedIn, Twitter, Airbnb, Ebay/PayPal e Oracle.

In Mustache.js sono presenti solo tag e sono indicati dalle parentesi graffe. I tag possono essere suddivisi in:

  1. Variabili: si tratta di semplici template indicati tramite doppie parentesi graffe ({{}}) che reindirizzano del testo. Se il nome del template non venisse trovato all’interno del contesto in cui ci si trova, verrà ricercato ricorsivamente nei contesti superiori. Se la ricerca del template non dovesse andare buon fine non verrà restituito nulla. Ecco alcuni esempi di variabili:

        {{name}}
        {{age}}
        {{company}}
        {{{company}}}
        {{& company}}


    Avendo come hash:

        {
            "name": "Chris",
            "company": "<b>GitHub</b>"
        }


    Avremo come risultato:

        Chris
        
        GitHub
        <b>GitHub</b>
        <b>GitHub</b>


    Nel primo caso avremo che viene restituito il nome grazie alla variabile name; nel secondo caso non viene restituito nulla in quanto la variabile age non esiste; nel terzo caso viene restituito il codice di company; negli ultimi due casi viene restituito il codice HTML non tradotto.

  2. Sezioni: consentono di reindirizzare dei blocchi di testo. Una sezione inizia con il cancelletto (#) e finisce con uno slash (/). Il comportamento della sezione è determinato dal valore della sua chiave, se il valore della chiave non esiste non verrà mostrato nulla. Le sezioni consentono di similure gli if/else, ad esempio con il seguente template:

        {{#person}}
            Non verrà mai mostrato!
        {{/person}}


    E con il seguente hash:

        {
            "person": false
        }


    Il testo non verrà mostrato nulla in quanto la chiave person è false.

  3. Liste: consentono di mostrare il contenuto del template per tutte le occorrenze della chiave. Ad esempio:

        {{#repo}}
          <b>{{name}}</b>
        {{/repo}}


    Con il seguente hash con 3 volte la chiave name:

    {
      "repo": [
        { "name": "Alex" },
        { "name": "John" },
        { "name": "Mary" }
      ]
    }


    La lista verrà iterata per 3 volte ed avremo:

        Alex
        John
        Mary

  4. Lambda: si tratta di oggetti invocabili in cui l’oggetto sarà invocato e passato al blocco di testo. Il testo passato non è rederizzato, ad esempio:

    {{#wrapped}}
      {{name}} is awesome.
    {{/wrapped}}

    Con il seguente codice

        {
          "name": "Willy",
          "wrapped": function() {
            return function(text, render) {
              return "<b>" + render(text) + "</b>"
            }
          }
        }


    Avremo come output:

        Willy is awesome.

  5. Booleani: se il valore è true verrà utilizzato per mostrare un singolo blocco di testo, mentre se il valore è false non verrà mostrato nulla. Ad esempio:

        {{#person}}
            Hi {{name}}!
        {{/person}}


    Ed avendo:

        {
            "person": { "name": "Jon" }
        }

    Verrà visualizzato:

        Hi Jon!

  6. Sezioni invertite: vengono indicate con l’accento circonflesso (^) e finiscono con uno slash (/). Una sezione invertita può reindirizzare il testo solo una volta in base al valore della chiave. Dato il seguente template:

        {{#repo}}
            <b>{{name}}</b>
        {{/repo}}
        {{^repo}}
            Nessun testo!
        {{/repo}}


    Ed il seguente codice:

        {
            "repo": []
        }


    Avremo come output:

        Nessun testo!

  7. Commenti: iniziano con un punto esclamativo (!). Ad esempio
        <span>Oggi{{! non verrò visualizzato }}.</span>


    Avremo:

        Oggi.

  8. Parziali: consentono di reindirizzare contenuti a runtime e si indicano con il segno maggiore (>). Ad esempio, avendo in un file:

        <span>Names</span>
        {{#names}}
        {{> user}}
        {{/names}}


    ed in un altro file:

        {{name}}


    Avremo:

        Names
        {{#names}}
            {{name}}
        {{/names}}

  9. Set di delimitatori: iniziano con il segno dell’uguale (=) e consentono di cambiare il tag delimitatore ({{ e }} nel tag scelto). Ad esempio scrivendo:

        {{=<% %>=}}


    possiamo scrivere

        <% person %>

    Il cambio dei delimitatori è utile in linguaggi come TeX in cui le doppie parentesi graffe hanno un altro significato e si potrebbero generare conflitti.

Pubblicato in Front-end, Java, JavaScript Taggato con: , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*