V minulom videu sme šablónu pokryli riadidlami. Riadidlá však nie sú jediným templátnym riešením v rade. V tomto videu použijeme šablónu dostupnú v podčiarknutí.
Prečo? Jedným z dôvodov je, že vo svojom projekte už možno používate podčiarknutie. Je to mimoriadne populárna knižnica, pretože rovnako ako jQuery poskytuje množstvo užitočných metód, ktoré fungujú naprieč prehliadačmi. Ako vravia:
Je to kravata, ktorú môžete kombinovať s smokingom jQuery a podväzkami Backbone.js.
Ak už Underscore používate, bol by to veľký stimul na jeho použitie.
Aj v mojom rýchlom testovaní sú riadidlá 1.0.0 14,2 kB gzipované a minifikované a podčiarknutie 4,9 KB gzipované a minifikované. Riadidlá majú jednoducho viac funkcií (napr. Komentovanie, cykly, cesty, logiku atď.). V našej jednoduchej ukážke tieto funkcie aj tak nepotrebujeme, takže to nie je úplne spravodlivé porovnanie, ale ach, len sa učíme.
Namiesto toho, aby sme mali šablónu v HTML, musíme definovať šablóny podčiarknutia v JavaScripte. Vrátili sme sa k nejakému zreťazeniu reťazcov.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledpotom sa zmení na funkciu, ktorú môžeme zavolať s kontextom našich dátových objektov, a vráti HTML všetky vyplnené týmito dátami. Aby sme boli efektívni, spojíme HTML, ktoré sa vracia, do jedného veľkého reťazca, aby sme ho mohli k DOM pripojiť iba raz:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);V tomto videu sme tiež abstrahovali od získavania údajov. Vytvorili sme zdroj JSON a na jeho získanie sme použili funkciu $ .getJSON () jQuery. Ako by sme to asi museli robiť v „skutočnom živote“.
$.getJSON("/path/to/json.js", function(data) ( ));Naša slučka for a taká, ktorá sa spolieha na tieto údaje, ide do spätného volania tam. Alebo s väčšou pravdepodobnosťou zavolá inú dobre pomenovanú funkciu, ktorá to zvládne, a udržuje veci čisté oddelené.
Tu sme skončili:
Prezrite si pero IpAdn od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Je potrebné poznamenať, že LoDash je 100% kompatibilný s tým, čo sme tu vykonali. Nie som si celkom istý, či je šablóna LoDash lepšia / rýchlejšia / pomalšia / horšia ako Underscore, ale vymenil som knižnice a ukážka fungovala dobre.