Tempo, un motore di rendering json





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.

<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.

<script>Tempo.prepare("esempio").render(datiJSON);</script>

In questo esempio supponiamo di avere una sorgente json con questi dati.

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:

 <ol id="esempio">
	<li data-template> <code>{{name.first}} -  {{nickname}}</code> </li>
</ol>

il codice generato nel browser sarà

&lt;ol id="esempio"&gt;
 &lt;li&gt; Gennaro - xiweb.it    &lt;/li&gt;
 &lt;li&gt; Mark - facebook.com &lt;/li&gt;
&lt;/ol&gt;

Nella pagina ufficiale di Tempo è possibile trovare esempi con Twitter e Solr.

Seguimi su twitter : @ironico

Leave a Reply

  

  

  

Current ye@r *

Login with:
Powered by Sociable!

Per essere informato sui miei contenuti - Email: