In preparazione al suo imminente discorso sui Templates in jQuery, Rey Bango ha eseguito una ‘profonda immersione’ sul plugin jQuery Template creato da Microsoft.
La cosa più interessante che riguarda i template è il fatto che lasciano facilmente strutturare i contenuti senza tutti i problemi di concatenazione di stringhe.
Ad esempio, supponiamo di dover visualizzare una serie di di dati che contengono un ID ed un nome facendo visualizzare un collegamento ipertestuale sul nome. Dovremmo creare un codice come questo:
var clRec = "";
for(var i=0; i<client.name.length; i++) {
clRec += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>";
}
ma, utilizzando i template, potremmo avere un codice più leggibile e gestibile:
<li><a href="clients/${id}">${name}</a></li>
Il secondo frammento di codice è molto semplice da realizzare: è un template creato per visualizzare il nome come collegamento ipertestuale in una lista.
In primo luogo, includiamo jQuery e il plugin Templates jQuery nella nostra pagina:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script src="jquery.tmpl.js" type="text/javascript"></script>
poi andiamo a definire i dati che si desidera vengano visualizzati.
Questi potrebbero provenire da una chiamata XHR oppure essere predefiniti, come ad esempio:
var clientData = [
{ name: "Rey Bango", id: 1 },
{ name: "Mark Goldberg", id: 2 },
{ name: "Jen Statford", id: 3 }
];
Andremo poi a definire il template:
<script id="clientTemplate" type="text/html">
<li><a href="clients/${id}">${name}</a></li>
</script>
I tag nello “script” sono necessari e devono essere utilizzati in quanto permettono al modello di essere inserito all’interno del corpo della pagina. Si può notare che i segnaposto sono stati definiti come $(id) ed $(name) che sono gli stessi nomi utilizzati per gli identificatori dei nostri dati. Il simbolo “${}” dice al parser del template che il campo deve essere sostituito con il valore atteso.
A questo punto effettuiamo la chiamata al plugin jQuery Template per visualizzare i dati utilizzando il modello:
$("#clientTemplate").tmpl(clientData).appendTo( "ul" );
Il metodo .tmpl() accetta i dati che abbiamo definito e gestisce l’analisi del modello che abbiamo selezionato.
Abbiamo poi utilizzato la funzione jQuery .appendTo() per aggiungere i risultati in una lista non ordinata.
Tutto questo dà il seguente risultato:
Ed ecco il codice completo da utilizzare:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>Template Test</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var clientData = [
{ name: "Rey Bango", id: 1 },
{ name: "Mark Goldberg", id: 2 },
{ name: "Jen Statford", id: 3 }
];
$("#clientTemplate").tmpl(clientData).appendTo( "ul" );
});
</script>
<script id="clientTemplate" type="text/html">
<li><a href="clients/${id}">${name}</a></li>
</script>
</head>
<body>
<ul></ul>
</body>
</html>
[Liberamente tradotto dall'articolo Not Using jQuery JavaScript Templates? You're Really Missing Out di Rey Bango]
Popolarità: 17%
