Non usi i templates jQuery? Non sai cosa perdi…

10 lug 2010

Categoria: Articoli

Ciao! Se sei un nuovo visitatore, iscriviti al nostro RSS feed per seguire gli aggiornamenti di questo articolo.

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]

Segnala Errore

Tag:framework, jQuery, plugin, template

Marco Pivetta
Sicuramente molto utile, ma sembra un po’ contro ECMAScript for XML (E4X) :
Si possono certamente fare bei lavori, ma si rischia di terminare con qualcosa di molto arrabattato :|
La sintassi per la definizione dei tpl è sempre una cosa tipo
```
&amp;lt;code&amp;gt;
 &amp;lt;a href=&amp;quot;clients/${id}&amp;quot; rel=&amp;quot;nofollow&amp;quot;&amp;gt;${name}&amp;lt;/a&amp;gt;
&amp;lt;/code&amp;gt;
```
oppure è possibile definire un codice più conforme (come il seguente)?
```
&amp;lt;code&amp;gt;&amp;lt;![CDATA[
 var clientTemplate=&amp;lt;a href=&amp;quot;clients/${id}&amp;quot; rel=&amp;quot;nofollow&amp;quot;&amp;gt;${name}&amp;lt;/a&amp;gt;;
]]&amp;gt;&amp;lt;/code&amp;gt;
```
Questo per non fare un gran chaos server/client side :
S’era visto in giro qualcosa di più interessante non-Microsoft ( http://plugins.jquery.com/project/jquerytemplate ) che accettava stringhe (e non XML)…
Marco Pivetta
Sicuramente molto utile, ma sembra un po’ contro ECMAScript for XML (E4X) :\
Si possono certamente fare bei lavori, ma si rischia di terminare con qualcosa di molto arrabattato :|
La sintassi per la definizione dei tpl è sempre una cosa tipo
```
<code>
 <a href="clients/${id}" rel="nofollow">${name}</a>
</code>
```
oppure è possibile definire un codice più conforme (come il seguente)?
```
<code><![CDATA[
 var clientTemplate=<a href="clients/${id}" rel="nofollow">${name}</a>;
]]></code>
```
Questo per non fare un gran chaos server/client side :\
S’era visto in giro qualcosa di più interessante non-Microsoft ( http://plugins.jquery.com/project/jquerytemplate ) che accettava stringhe (e non XML)…
Marco Pivetta
Ok, WordPress ha strippato tutto il commento -.-
Marco Pivetta
Ok, WordPress ha strippato tutto il commento -.-
http://www.jqueryitalia.org jqueryitalia
Te l’ho sistemato io il commento ;-).
Non credo si faccia confusione tra server / client side perchè, come scritto nell’articolo, il template va sempre inserito tra i tag
```
&amp;lt;script&amp;gt;...&amp;lt;/script&amp;gt;
```

Marco Pivetta
Si, ma non è E4X, nè text/javascript, e appena uso un linguaggio di templating lato server rischio di sballare tutto (es. HTMLPurifier che rompe le scatole, PHPTAL che non vuole saperne di compilare il TPL, ecc…).
Personalmente scoraggio l’approccio sopra citato e consiglio piuttosto un
```
// Store a string as a compiled template for later use
$.templates( &amp;quot;myTmpl&amp;quot;, &amp;quot;${firstName}&amp;quot; );
// Render stored template and insert after target.
$.tmpl( &amp;quot;myTmpl&amp;quot;, dataObject )
    .insertAfter( &amp;quot;#target&amp;quot; );
```
Onanismi mentali miei :D

http://www.jqueryitalia.org jqueryitalia
Te l’ho sistemato io il commento ;-).
Non credo si faccia confusione tra server / client side perchè, come scritto nell’articolo, il template va sempre inserito tra i tag
```
<script>...</script>
```

Marco Pivetta
Si, ma non è E4X, nè text/javascript, e appena uso un linguaggio di templating lato server rischio di sballare tutto (es. HTMLPurifier che rompe le scatole, PHPTAL che non vuole saperne di compilare il TPL, ecc…).
Personalmente scoraggio l’approccio sopra citato e consiglio piuttosto un
```
// Store a string as a compiled template for later use
$.templates( "myTmpl", "${firstName}" );
// Render stored template and insert after target.
$.tmpl( "myTmpl", dataObject )
    .insertAfter( "#target" );
```
Onanismi mentali miei :D

http://www.ilcaimano.it Caimano
avevo letto l’articolo ieri nel sito ufficiale, sinceramente sono peró assai perplesso soprattutto sulle prestazioni di un engine template in javascript.
Che impatto puó avere su un uso massivo quale ad esempio puó essere un portale??? Mah… Vedremo …

Marco Pivetta
Mai avuto problemi con JS se non con i DB SQLite (migliaia di record, eh!)
Sicuramente non va bene per cose giganti tipo jQuery DataTables, ma penso si possa tranquillamente lavorare su qualche migliaio di record se non fai reflow ogni volta… Altrimenti sposti tutto su un worker thread :D

caimano
Se giganti sono per te 500 rows per 6 dati ciascuna (datatables scoppia già così ad esempio) allora come puoi ben capire non è forse lo strumento adatto …

http://www.ilcaimano.it Caimano
avevo letto l’articolo ieri nel sito ufficiale, sinceramente sono peró assai perplesso soprattutto sulle prestazioni di un engine template in javascript.
Che impatto puó avere su un uso massivo quale ad esempio puó essere un portale??? Mah… Vedremo …

Marco Pivetta
Mai avuto problemi con JS se non con i DB SQLite (migliaia di record, eh!)
Sicuramente non va bene per cose giganti tipo jQuery DataTables, ma penso si possa tranquillamente lavorare su qualche migliaio di record se non fai reflow ogni volta… Altrimenti sposti tutto su un worker thread :D

caimano
Se giganti sono per te 500 rows per 6 dati ciascuna (datatables scoppia già così ad esempio) allora come puoi ben capire non è forse lo strumento adatto …

http://www.jqueryitalia.org jqueryitalia
Un ottimo esempio di utilizzo lo potete trovare qui:
http://infinity88.com/jquery-tmpl/movies/movies.htm
ed i dati da visualizzare sono anche un bel po’… ;-)
http://www.jqueryitalia.org jqueryitalia
Un ottimo esempio di utilizzo lo potete trovare qui:
http://infinity88.com/jquery-tmpl/movies/movies.htm
ed i dati da visualizzare sono anche un bel po’… ;-)