Abbiamo coperto i modelli con Manubri nell'ultimo video. Ma il manubrio non è l'unica soluzione di template sul blocco. In questo video utilizzeremo il modello disponibile in Underscore.
Perché? Uno dei motivi è che potresti già utilizzare Underscore nel tuo progetto. È una libreria estremamente popolare perché, come jQuery, fornisce una serie di metodi utili che funzionano su più browser. Come dicono:
È la cravatta da abbinare allo smoking di jQuery e alle bretelle di Backbone.js.
Se stai già utilizzando Underscore, sarebbe un grande incentivo a utilizzare il suo modello.
Anche nei miei test rapidi, Handlebars 1.0.0 è di 14,2 KB compresso con gzip e minimizzato e Underscore è di 4,9 KB compresso con gzip e minimizzato. Manubri ha semplicemente più funzionalità (ad esempio commenti, loop, percorsi, logica, ecc.). Nella nostra semplice demo, non abbiamo comunque bisogno di queste funzionalità, quindi non è esattamente un confronto equo, ma vabbè stiamo solo imparando.
Piuttosto che avere il modello in HTML, dobbiamo definire modelli di sottolineatura in JavaScript. Siamo tornati a una concatenazione di stringhe.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledquindi si trasforma in una funzione che possiamo chiamare con il nostro contesto dell'oggetto dati e restituisce l'HTML compilato con quei dati. Per essere efficienti, concateneremo l'HTML che restituisce in un'unica grande stringa in modo da poterlo aggiungere al DOM solo una volta:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);In questo video abbiamo anche astratto l'ottenimento dei dati. Abbiamo creato una sorgente JSON e abbiamo utilizzato la funzione $ .getJSON () di jQuery per ottenerla. Come probabilmente dovremmo fare nella "vita reale".
$.getJSON("/path/to/json.js", function(data) ( ));Il nostro ciclo for e tale che si basa su quei dati va nella richiamata lì. O più probabilmente, chiama qualche altra funzione ben denominata per gestirla, mantenendo le cose nettamente separate.
Ecco dove siamo finiti:
Vedi Pen IpAdn di Chris Coyier (@chriscoyier) su CodePen
Va notato che LoDash è compatibile al 100% con ciò che abbiamo fatto qui. Non sono abbastanza sicuro che i modelli LoDash siano migliori / più veloci / più lenti / peggiori di quelli di Underscore, ma ho sostituito le librerie e la demo ha funzionato bene.