Tempo, un motore di rendering json
22 marzo 2011
Tempo è una libreria javascript di soli 4Kb che permette di caricare dati JSON in HTML, separando il codice HTML dalla logica JavaScript in modo da aumentare la leggibilità del codice. E’ compatibile con Safari, Chrome, FireFox, Opera, and Internet Explorer 6+. E’ indipendente da Jquery e supporta sia gli annidamenti che i template condizionali.
L’utilizzo è semplice. Prima bisogna caricare la libreria.
|
1 |
<script src="js/tempo.js" type="text/javascript"></script> |
Poi eseguire la funzione prepare che prende l’elemento html in cui vogliamo agire, ed infine la funzione render per caricare i dati json ed elaborarli.
|
1 |
<script>Tempo.prepare("esempio").render(datiJSON);</script> |
In questo esempio supponiamo di avere una sorgente json con questi dati.
|
1 2 3 4 |
var datiJSON = [ {'name':{'first':'Gennaro','last':'Varriale'},'nickname':'xiweb.it', {'name':{'first':'Mark','last':'zuckenberg'},'nickname':'facebook.com' ]; |
il codice html per renderizzare i dati sarà il seguente:
|
1 2 3 |
<ol id="esempio"> <li data-template> <code>{{name.first}} - {{nickname}}</code> </li> </ol> |
il codice generato nel browser sarà
|
1 2 3 4 |
<ol id="esempio"> <li> Gennaro - xiweb.it </li> <li> Mark - facebook.com </li> </ol> |
Nella pagina ufficiale di Tempo è possibile trovare esempi con Twitter e Solr.
« « Creare un’applicazione facebook : canvas Page e canvas Url | Inserire il pulsante Invia di facebook (send) in una pagina » »
Articoli correlati
