TEMPO: mostrare dati JSON con solo codice HTML

Lanciata da pochi giorni, Lanciata da pochi giorni, è una piccola (4Kb) e brillante libreria JavaScript che ci mette a disposizione un rendering engine JSON controllabile con puro codice HTML. La separazione tra HTML e JavaScript rende più facile il lavoro con contenuti AJAX, aumenta la leggibilità del codice e ne facilita la manutenzione. Tempo è compatibile con tutti i browser (IE6 incluso), si integra alla perfezione con jQuery ed è davvero facile da usare.

JSON

JSON è un formato di scambio dati sempre più diffuso. Un flusso di dati JSON è relativamente compatto (soprattutto rispetto al suo rivale XML) ed è facile da interpretare sia per un umano che per un computer. Ormai tutte le Web API più usate (Facebook, Twitter, ecc.) supportano ampiamente JSON. Ecco un esempio di array JSON:

var data = [
    {'name':{'first':'Leonard','last':'Marx'},'nickname':'Chico','born':'March 21, 1887','actor': true,'solo_endeavours':[{'title':'Papa Romani'}]},
    {'name':{'first':'Adolph','last':'Marx'},'nickname':'Harpo','born':'November 23, 1888','actor':true,'solo_endeavours':[{'title':'Too Many Kisses','rating':'favourite'},{'title':'Stage Door Canteen'}]},
    {'name':{'first':'Julius Henry','last':'Marx'},'nickname':'Groucho','born': 'October 2, 1890','actor':true,'solo_endeavours':[{'title':'Copacabana'},{'title':'Mr. Music','rating':'favourite'},{'title':'Double Dynamite'}]},
    {'name':{'first':'Milton','last':'Marx'},'nickname':'Gummo','born':'October 23, 1892'},
    {'name':{'first':'Herbert','last':'Marx'},'nickname':'Zeppo','born':'February 25, 1901','actor':true,'solo_endeavours':[{'title':'A Kiss in the Dark'}]}
];

JavaScript

Dopo aver scaricato la libreria includiamola nella nostra pagina:

<script src="js/tempo.js" type="text/javascript"></script>

Tempo.prepare(element)

Tempo.Prepare() cerca uno o più data-template in un contenitore HTML, li mette in cache e li rimuove dalla pagina (verranno sostituiti dai dati in fase di rendering). Restituisce infine una istanza specializzata del renderer che, grazie alle indicazioni contenute nei data-template, sa già come mostrare i dati. Se stiamo usando jQuery possiamo passare direttamente l’oggetto jQuery.

renderer.render(data)

Il metodo render si applica alla instanza del renderer restituita da Tempo.prepare(). Accetta come argomento i dati JSON e li mostra finalmente nella nostra pagina HTML.

Tempo.prepare('marx-brothers').render(data);

HTML

Tempo riconosce come template qualunque tag con attributo data-template che sia contenuto nell’elemento HTML da noi indicato. Indichiamo i campi dell’array JSON col nome racchiuso tra doppie parentesi {{}}

<ol id="marx-brothers">
    <li data-template>{{nickname}} {{name.last}}</li>
</ol>

il codice viene reso con:

<ol id="marx-brothers1">
    <li>Chico Marx</li>
    <li>Harpo Marx</li>
    <li>Groucho Marx</li>
    <li>Gummo Marx</li>
    <li>Zeppo Marx</li>
</ol>

Per le funzionalità avanzate (condizioni se-allora, data-template nidificati, supporto jQuery e gestione callbacks ed eventi) vi rimando alla pagina ufficiale della libreria, dalla quale peraltro ho tratto gran parte di questo esempio. Vi trovate anche un esempio funzionante di rendering di un flusso proveniente da Twitter e recuperato via jQuery.