Az utolsó videóban kissé kusza rendetlenséggel abbahagytuk. A JavaScript egy blokkjában mind összekevertük az adatgyűjtést, a megjelenítési és üzleti logikát, valamint a sablonokat. Ebben a videóban elkezdjük ezeket a dolgokat feldarabolni, hogy a szervezettebb, karbantarthatóbb és érthetőbb kód felé jussunk. Ennek nagy része a sablon.
Vegyük az 1. helyet sablon kalandunkon a kormányon. A kormány okos megközelítést alkalmaz, mivel a sablon HTML-jét szó szerint a HTML-be helyezzük. Speciális címkét használ . Remek írást tesz lehetővé, mert elkerülhetjük a húrok összefűzésének ügyetlenségét (mindazokat az idézeteket és pluszokat), és megszerezhetjük a szerkesztő által biztosított szép szintaxis kiemelést. Sablonunk végül így nézett ki:
((movieTitle))
((movieDirector))
Vegye figyelembe a furcsa typeattribútumot a szkript címkéjén. Ez megakadályozza a címke tartalmának végrehajtását. Végül a kormány csak kirántja ennek a címkének a belét, és sablon funkcióvá alakítja. Elég okos módszer a kezelésére.
Azok a bitek, mint ((movieTitle))a, fontos részek. Végül átadunk egy objektumot a létrehozott sablonfüggvénynek, és az objektum tulajdonságai megegyeznek ezekkel a helyőrző bitekkel. A kormányt valószínűleg kormánynak hívják, mert ezek a helyőrző bitek göndör zárójelbe vannak csomagolva, amelyek felülről kissé hasonlítanak a kormányra.
A Handlebars webhely egyszerű bemutatóját követve a következő módon készítjük el a sablonfüggvényünket:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Ezután a forciklusunkon belül meghívjuk új sablonfüggvényünket az objektummal (a kontextus), amely egyetlen filmet tartalmaz. A HTML-t visszaküldik, és mi hozzáfűzzük az oldalhoz.
var html = template(data.movies(i)); $("#movies").append(html);A videó sablonját is átvesszük, és egy másik Penbe filmezzük. Ez csak azt jelzi, hogy miként bontaná fel saját kódját egy valós projektben. A sablon szinte biztos, hogy valamiféle „tartalmazza”.
Itt hova kerültünk:
Lásd Chris Coyier (@chriscoyier) Pen mdCjJ-jét a CodePen-en
Itt jó előrelépéseket tettünk a jobb kód felé, de még tennünk kell a tökéletes tisztaság érdekében.