V zadnjem videu smo končali z malce zapleteno zmešnjavo. V enem bloku JavaScript smo mešali iskanje podatkov, prikaz in poslovno logiko ter predloge. V tem videoposnetku bomo te stvari začeli razbijati, da bomo prišli do bolj organizirane, vzdržne in razumljive kode. Velik del tega so predloge.
Pojdite na prvo mesto naše šablonske dogodivščine s krmili. Krmilo ima pameten pristop, saj je HTML za predlogo dobesedno vstavljen v HTML. Uporabite posebno oznako. Omogoča lepo avtorstvo, ker se lahko oddaljimo od okornosti združevanja nizov (vseh teh narekovajev in plusov) in dobimo lepo poudarjanje sintakse za HTML, ki ga ponuja vaš urejevalnik. Naša predloga je bila na koncu videti tako:
((movieTitle))
((movieDirector))
Upoštevajte čuden typeatribut na oznaki skripta. To preprečuje izvajanje vsebine te oznake. Končno Handlebars samo potegne drobovje te oznake in jo spremeni v funkcijo predloge. Precej pameten način, kako to resnično obvladati.
Ti deli, kot ((movieTitle))so, so pomembni deli. Končno posredujemo objekt predlogi, ki se ustvari, in lastnosti tega predmeta se ujemajo s temi nadomestnimi biti. Krmilo je verjetno poimenovano krmilo, ker so tisti nadomestni deli zaviti v zavite oklepaje, ki so od zgoraj nekoliko podobni krmilom.
Po preprosti vadnici na spletnem mestu Handlebars ustvarimo svojo funkcijo predloge, kot je ta:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Nato v naši forzanki pokličemo novo funkcijo predloge s predmetom (kontekst), ki vsebuje en film. HTML bo vrnjen in ga bomo dodali strani.
var html = template(data.movies(i)); $("#movies").append(html);V tem videoposnetku vzamemo tudi predlogo in jo posnamemo v drugo pero. To samo pomeni, kako bi verjetno razbili lastno kodo v resničnem projektu. Predloga bi bila skoraj zagotovo nekakšen "vključek".
Tu smo končali:
Oglejte si Pen mdCjJ Chrisa Coyierja (@chriscoyier) na CodePen
Tukaj smo naredili nekaj dobrih korakov k boljši kodi, vendar jo moramo še potruditi, da bo popolnoma čista.