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:
JavaScript
Dopo aver scaricato la libreria includiamola nella nostra pagina:
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.
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 {{}}
il codice viene reso con:
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.