U prošlom smo videozapisu obradili predloške s upravljačima. No upravljači nisu jedino rješenje za templatiranje u bloku. U ovom ćemo se videu koristiti predlošci dostupni u donjem crti.
Zašto? Pa jedan od razloga je taj što na svom projektu možda već koristite Podvlačenje. To je izuzetno popularna knjižnica jer, poput jQuery, nudi hrpu korisnih metoda koje rade u različitim preglednicima. Kako kažu:
To je kravata koja ide uz jQuery-jev smoking i tregere Backbone.js-a.
Ako već koristite Podvlaku, to bi bio veliki poticaj za korištenje njegove predloške.
Također u mom brzom testiranju, Handlebars 1.0.0 gzipiran je i umanjen 14,2 KB, a donja crta 4,9 KB gzipirana i umanjena. Volan jednostavno ima više značajki (npr. Komentiranje, petlje, putanje, logika itd.). U našem jednostavnom demonstracijskom programu ionako nam nisu potrebne te značajke, pa to nije baš poštena usporedba, ali oh, pa tek učimo.
Umjesto da imamo predložak u HTML-u, trebamo definirati podcrtane predloške u JavaScript-u. Vratili smo se na neko spajanje nizova.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledzatim se pretvara u funkciju koju možemo pozvati s našim kontekstom objekta podataka i vraća HTML ispunjen tim podacima. Da bismo bili učinkoviti, spojit ćemo HTML koji se vraća u jedan veliki niz kako bismo ga mogli dodati u DOM samo jednom:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);U ovom smo videu apstrahirali i dobivanje podataka. Izradili smo JSON izvor i koristili jQuery-jevu funkciju $ .getJSON () da bismo ga dobili. Kao što bismo vjerojatno morali učiniti u "stvarnom životu".
$.getJSON("/path/to/json.js", function(data) ( ));Naša petlja for i takva koja se oslanja na te podatke ide u povratni poziv tamo. Ili vjerojatnije, poziva neku drugu dobro imenovanu funkciju da to riješi, održavajući stvari čisto odvojenima.
Evo gdje smo završili:
Pogledajte Pen IpAdn Chrisa Coyiera (@chriscoyier) na CodePenu
Treba napomenuti da je LoDash 100% kompatibilan s onim što smo ovdje učinili. Nisam sasvim siguran je li predložak LoDash nešto bolji / brži / sporiji / lošiji od Underscore-a, ali zamijenio sam knjižnice i demo je radio sasvim u redu.