Paskutiniame vaizdo įraše aptarėme šablonus su vairu. Tačiau vairas nėra vienintelis bloko šablonų sprendimas. Šiame vaizdo įraše naudosime šabloną, kurį galite rasti pabraukdami.
Kodėl? Viena iš priežasčių yra ta, kad jūs galbūt jau naudojate „Underderscore“ savo projekte. Tai nepaprastai populiari biblioteka, nes, kaip ir „jQuery“, ji pateikia daugybę naudingų metodų, kurie veikia keliose naršyklėse. Kaip jie sako:
Tai yra kaklaraištis kartu su „jQuery“ tuxu ir „Backbone.js“ petnešomis.
Jei jau naudojate pabraukimą, tai būtų didelė paskata naudoti jo šablonus.
Be to, atliekant greitą bandymą, vairo 1.0.0 yra 14,2 KB gzip ir suspaustas, o apatinis brūkšnys yra 4,9 KB gzip ir supakuotas. Vairas paprasčiausiai turi daugiau funkcijų (pvz., Komentavimas, kilpos, keliai, logika ir kt.). Mūsų paprastoje demonstracijoje mums vis tiek nereikia tų funkcijų, todėl tai nėra teisingas palyginimas, bet, na, mes tik mokomės.
Užuot turėję šabloną HTML, „JavaScript“ turime apibrėžti pabraukimo šablonus. Grįžome prie styginių sujungimo.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledtada virsta funkcija, kurią galime iškviesti naudodami savo duomenų objekto kontekstą, ir pateikia HTML, užpildytą visais tais duomenimis. Norėdami būti efektyvūs, ketiname susieti HTML, kuris grįžta į vieną didelę eilutę, kad galėtume jį pridėti prie DOM tik vieną kartą:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);Šiame vaizdo įraše taip pat atsisakėme duomenų gavimo. Sukūrėme JSON šaltinį ir jam gauti naudojome jQuery funkciją $ .getJSON (). Kaip mes tikriausiai turėtume daryti „realiame gyvenime“.
$.getJSON("/path/to/json.js", function(data) ( ));Mūsų už kilpą ir tokią, kuri remiasi tais duomenimis, ten yra atgalinis skambutis. Arba labiau tikėtina, kad tam reikalinga kita gerai pavadinta funkcija, kad viskas būtų švariai atskirta.
Štai kur mes atsidūrėme:
Žr. Chriso Coyierio (@chriscoyier) „Pen IpAdn“ „CodePen“
Reikėtų pažymėti, kad „LoDash“ yra 100% suderinamas su tuo, ką mes čia padarėme. Nesu tikras, ar „LoDash“ šablonai yra geresni / greitesni / lėtesni / blogesni nei „Underderscore“, bet aš pakeičiau bibliotekas ir demonstracinė versija veikė puikiai.