Template per jQuery?
L’idea di costruire un sistema di template per jQuery continua ad avanzare.
Tale sistema permette di convertire facilmente codice JSON in HTML senza analizzarlo.
Alla conferenza MIX10 di Microsoft, è stato annunciato l’inizio di una collaborazione con il team di jQuery.
E una delle idee è quella di fornire un plugin per il templating.
[yt video=”nRv4dJrpBuY” width=”560″ height=”340″ /]
Vediamo come sarà possibile utilizzarlo.
Prima di tutto sarà necessario un modello di dati.
Molto probabilmente sarà JSON a recuperare i dati (anche se Oggetti od Array funzioneranno altrettanto bene):
var data = [ { name : "John", age : 25 }, { name : "Jane", age : 49 }, { name : "Jim", age : 31 }, { name : "Julie", age : 39 }, { name : "Joe", age : 19 }, { name : "Jack", age : 48 } ]; var data = [ { name : "John", age : 25 }, { name : "Jane", age : 49 }, { name : "Jim", age : 31 }, { name : "Julie", age : 39 }, { name : "Joe", age : 19 }, { name : "Jack", age : 48 }];
Il modello sarà scritto con il tag
<script type="text/html"></script>
Per ogni oggetto contenuto in JSON, il modello effettuerà il rendering del codice HTML e successivamente restituirà l’intero codice HTML.
I valori javascript all’interno del modello saranno aggiunti utilizzando il nuovo tag {% e %}, e sarà anche possibile eseguire codice javascript all’interno di questi.
Ecco il nostro modello:
<li> <span>{%= $i + 1 %}</span> <p><strong>Name: </strong> {%= name %}</p> {% if ($context.options.showAge) { %} <p><strong>Age: </strong> {%= age %}</p> {% } %} </li>
Per visualizzare i dati con il modello, sarà sufficiente richiamare il plugin e passare i dati al suo metodo.
Potete scaricare il codice completo su Github
Potete seguire lo sviluppo e le proposte su:
- il Forum di jQuery
- la pagina di Github
[Liberamente tradotto da un articolo di Andrew Burgess su TutPlus.com]