Am acoperit șablonarea cu ghidon în ultimul videoclip. Dar Ghidonele nu sunt singura soluție de șablonare a blocului. În acest videoclip vom folosi modelarea disponibilă în Underscore.
De ce? Un motiv este că s-ar putea să utilizați deja Underscore pentru proiectul dvs. Este o bibliotecă extrem de populară, deoarece, la fel ca jQuery, oferă o grămadă de metode utile care funcționează pe mai multe browsere. Cum se spune:
Este cravata pentru a merge împreună cu tux-ul jQuery și bretelele Backbone.js.
Dacă utilizați deja Underscore, acesta ar fi un mare stimulent pentru a utiliza modelarea acestuia.
De asemenea, în testarea mea rapidă, Handlebars 1.0.0 are 14,2 KB gzipped și minified și Underscore are 4,9 KB gzipped and minified. Ghidonele au pur și simplu mai multe caracteristici (de exemplu, comentarii, bucle, căi, logică etc.). În demo-ul nostru simplu, oricum nu avem nevoie de aceste funcții, deci nu este tocmai o comparație corectă, dar, bine, doar învățăm.
În loc să avem șablonul în HTML, trebuie să definim șabloanele de subliniere în JavaScript. Ne-am întors la unele concatenări de șiruri.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledapoi se transformă într-o funcție pe care o putem apela cu contextul obiectului nostru de date și returnează codul HTML completat cu acele date. Pentru a fi eficienți, vom concatena codul HTML care revine într-un șir mare, astfel încât să-l putem atașa la DOM o singură dată:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);În acest videoclip am abstractizat și obținerea datelor. Am creat o sursă JSON și am folosit funcția $ .getJSON () a jQuery pentru ao obține. Așa cum probabil ar trebui să facem în „viața reală”.
$.getJSON("/path/to/json.js", function(data) ( ));Bucla noastră de for și altele care se bazează pe aceste date intră în callback acolo. Sau, mai probabil, apelează la o altă funcție bine numită pentru a face față acestui lucru, păstrând lucrurile separate separat.
Iată unde am ajuns:
Vezi Pen IpAdn de Chris Coyier (@chriscoyier) pe CodePen
Trebuie remarcat faptul că LoDash este 100% compatibil cu ceea ce am făcut aici. Nu sunt foarte sigur dacă modelarea LoDash este mai bună / mai rapidă / mai lentă / mai rea decât Underscore's, dar am schimbat bibliotecile și demo-ul a funcționat foarte bine.