V minulom videu sme skončili s trochou zamotaného neporiadku. Všetko v jednom bloku JavaScriptu sme zmiešali načítanie dát, zobrazenie a obchodnú logiku a šablónu. V tomto videu začneme tieto veci rozbíjať, aby sme sa dostali na cestu k organizovanejšiemu, udržiavateľnejšiemu a zrozumiteľnejšiemu kódu. Veľkú časť tvoria šablóny.
Vezmite si č. 1 na našom šarmantnom dobrodružstve s riadidlami. Riadidlá majú šikovný prístup v tom, že HTML pre šablónu je doslova vložený do HTML. Používate špeciálnu značku. Je to príjemná tvorba, pretože sa môžeme vyhnúť nemotornosti reťazenia reťazcov (všetky tie úvodzovky a plusy) a získať pekné zvýraznenie syntaxe pre HTML, ktoré poskytuje váš editor. Naša šablóna nakoniec vyzerala takto:
((movieTitle))
((movieDirector))
Všimnite si zvláštny typeatribút na značke skriptu. To zabráni vykonaniu obsahu tejto značky. Nakoniec riadidlá iba vytrhnú vnútornosti tejto značky a urobia z nej funkciu šablóny. Veľmi šikovný spôsob, ako to skutočne zvládnuť.
Tieto kúsky ako ((movieTitle))sú dôležité časti. Nakoniec odovzdáme objekt vytvorenej šablónovacej funkcii a vlastnosti tohto objektu sa zhodujú s týmito zástupnými bitmi. Riadidlá sa pravdepodobne nazývajú riadidlá, pretože tie zástupné znaky sú zabalené do kučeravých zátvoriek, ktoré zhora vyzerajú ako riadidlá.
Podľa jednoduchého návodu na webe Handlebars vytvoríme našu šablónovaciu funkciu takto:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Potom v rámci našej forslučky zavoláme našu novú šablónovaciu funkciu s objektom (kontextom), ktorý obsahuje jeden film. HTML sa vráti a my ho pripojíme na stránku.
var html = template(data.movies(i)); $("#movies").append(html);Taktiež vezmeme šablónu v tomto videu a nafilmujeme ju na iné pero. To len znamená, ako by ste pravdepodobne rozbili svoj vlastný kód v skutočnom projekte. Šablóna by takmer určite bola akýmsi „zahrnutím“.
Tu sme skončili:
Prezrite si pero mdCjJ od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Urobili sme tu niekoľko dobrých krokov k zlepšeniu kódu, ale musíme urobiť ešte viac, aby bol dokonale čistý.