MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Template Javascript agnostici con Handlebars
In un precedente tutorial ho trattato il tema della creazione di elementi dinamici lato client con Javascript utilizzando dati in formato JSON come sorgente e librerie di templating per la creazione dei tag nella pagina, il tutto era però strettamente legato alla libreria jQuery.
Non che jQuery non vada bene, anzi, sono un suo assiduo utilizzatore e fan, ma può succedere che per un motivo o per l'altro nel progetto in cui ci troviamo a lavorare è stato scelto di utilizzare un'altra libreria core (o di non utilizzarne affatto) e quindi non è mai una cattiva idea avere nel proprio arsenale qualche piccola libreria Javascript agnostica, ovvero che non dipende direttamente da nessun'altra libreria come MooTools, jQuery o Prototype.
Oggi andiamo alla scoperta di Handlebars una fantastica mini-libreria per la creazione di template Html dinamici, molto simile a jQuery Tmpl ma come dicevamo prima senza prerequisiti di altre librerie!
[btn icona="eye-open" url="http://www.moebiusmania.net/tutorial/2013/handlebars_demo.html"]Guarda un esempio[/btn] [btn icona="download-alt" url="http://www.moebiusmania.net/wp-content/plugins/download-monitor/download.php?id=16"]Scarica i sorgenti del tutorial[/btn]
1. Caricare la libreria
Come tutte le librerie Javascript per prima cosa includiamo il file nella nostra pagina Html:<script type="text/javascript" src="js/handlebars-1.0.rc.1.js"></script>Handlebars come ho detto prima è una libreria che non ha dipendenze, quindi se dovesse esserci anche jQuery nella pagina non importa che sia inserito prima o dopo di esso.
2. Definire la sorgente di dati
Voglio creare una lista non ordinata che visualizzi i principali linguaggi web, quindi dovrò creare come sorgente di dati un array con queste voci ma a differenza del plugin Tmpl non possiamo prendere un semplice array come sorgente, Handlebars vuole un vero e proprio oggetto JSON:var dati1 = {
linguaggi:["Html","Css","Javascript","PHP"]
}
Ora siamo pronti per creare la marcatura del template che visualizzerà questi dati.
3. Creare il template HTML
All'interno del body creiamo la lista che ospiterà il risultato finale<ul id="lista"></ul>Questo sarà l'unico pezzo statico di codice Html per questo esempio, le voci della lista le creeremo dinamicamente con Handlebars, quindi da qualche parte fuori dal tag <body> creiamo un nuovo tag <script> con una tipologia dedicata che ospiterà il nostro template di marcatura che useremo:
<script id="voce" type="text/x-handlebars-template">
{{#each linguaggi}}
<li>{{this}}</li>
{{/each}}
</script>
come dicevo prima l'attributo type è settato in modo da distinguere questo tag apposta per Handlebars (quindi non è esclusa la possibilità di usare più librerie di templating JS nella stessa pagina), all'interno abbiamo un tag <li> con l'espressione {{this}} che serve come segnaposto per il valore attuale, tutto questo tag è all'interno di un'espressione {{#each}} che dice di ripetere il suo contenuto in base al numero di elementi presenti all'interno dell'array "linguaggi", quindi ogni volta che verrà ripetuto il template verrà inserita un diverso elemento al suo interno.
4. Handlebars in azione
Adesso è giunto il momento di de elaborare il tutto con Javascript, le righe di codice necessarie sono poche// Ottengo la marcatura del template
var struttura = document.getElementById("voce").innerHTML;
// Compilo la marcatura in un template
var template = Handlebars.compile(struttura);
// Inserisco i dati nel template
var html = template(dati1);
// Renderizzo il tutto nella pagina
document.getElementById("lista").innerHTML = html;
Se ora salviamo il documento e lanciamo la pagina del browser dovremmo vedere una lista non ordinata con 4 voci, ognuno che contiene il nome di un linguaggio web.