Mustache ----- mai più stringhe concatenate in Javascript!!!!!

Per utilizzare la libreria Mustache.js sono necessari i seguenti passi:

1) installazione
     https://github.com/janl/mustache.js   in base al vostro ambiente, scegliete il sistema a voi consono.
2) creazione del template da posizionare magari, in una pagina html esistente:

Il template, che vi propongo è rappresentato da un blocco  <script> il cui type è "x-tmpl-mustache", ad esempio:

<script id="idDelTemplate" type="x-tmpl-mustache">
    <div class=' col-md-12 col-sm-12  col-xs-12  input-group' id='{{matricola}}'>
        <span class='form-control'>{{matricola}}</span>
        <span class='input-group-addon' onclick='removeBarcode("{{matricola}}")'> <i class='glyphicon glyphicon-trash'></i> </span>
    </div>
</script>

Successivamente, per utilizzarlo bastera:

 3) Wrappare il template con jquery :

                   var newItem = $('#idDelTemplate').html();

4) Testare se il template sia corretto :

                   Mustache.parse(newItem); // sembra sia optionale e utile in futuro... il progetto 

5) "Stampare" il template collegato al modello nel nostro contenitore:

              var printedModelTemplate= Mustache.render(template, objModel);

              $('body').html(printedModelTemplate);

dove il modello objModel = { matricola:1234123123};

Questa libreria è definita come logicLess, pertanto non si avranno disponibili le funzionalità "di alto livello" presenti in altri framework, vedi React (  che a prima vista pare estenda  Mustache ) o AngularJs/2

ad ogni modo, un minimo di rendering condizionato, il nostro Mustache lo offre, ad esempio supponendo di dover renderizzare un blocco html in base al verificarsi di una condizione,  Mustache offre la seguente sintassi:

{{#VAR}} Do Some Stuff{{/VAR}}

{{^VAR}} Not Do Some Stuff{{/VAR}}

Supponendo che nel modello sia contenuta una property VAR di tipo booleano, se VAR è true verrà stampato 

Do Some Stuff

altrimenti

Not Do Some Stuff

in termini pratici, i blocchi condizionali andranno posizionati dove si ritiene necessario :

objModel = { matricola:1234123123, VAR :true};

<script id="idDelTemplate" type="x-tmpl-mustache">

    <div class=' col-md-12 col-sm-12  col-xs-12  input-group' id='{{matricola}}'>

        <span class='form-control'>{{matricola}}</span>

        <span class='input-group-addon' onclick='removeBarcode("{{matricola}}")'> <i class='glyphicon glyphicon-trash'></i> </span>

    </div>

{{#VAR}}<span>Do Some Stuff</span>{{/VAR}}

{{^VAR}} <p>Not Do Some Stuff</p>{{/VAR}}

</script>

Libreria onesta, semplice e con poche pretese, sebbene l'efficacia sia indiscutibile.

ciao ciao