Vi slap i den sidste video med lidt sammenfiltret rod. Alt i en blok af JavaScript blandede vi datahentning, visning og forretningslogik og skabeloner. I denne video vil vi begynde at bryde disse ting op for at få os på vej til mere organiseret, vedligeholdelig og forståelig kode. En stor del af det er skabeloneringen.
Tag nr. 1 på vores skabeloneventyr er med styr. Styr har en klog tilgang, idet HTML til skabelonen bogstaveligt talt placeres i HTML. Du bruger et specielt mærke. Det giver god forfatterskab, fordi vi kan komme væk fra den klodsethed, der er ved sammenkædning af strenge (alle disse citater og plusser) og få den pæne syntaksfremhævning til HTML, som din editor giver. Vores skabelon så i sidste ende sådan ud:
((movieTitle))
((movieDirector))
Bemærk den underlige typeattribut på script-tagget. Det forhindrer, at indholdet af dette tag udføres. I sidste ende trækker styret bare tarmene til dette tag og gør det til en skabelonfunktion. Temmelig smart måde at håndtere det virkelig på.
Disse bits ((movieTitle))er de vigtige dele. Vi sender i sidste ende et objekt til den skabelonfunktion, der oprettes, og egenskaberne for det objekt matcher disse pladsholderbits. Styr er navngivet styr, formodentlig fordi disse pladsholderbit er pakket i krøllede seler, der ligner lidt styr ovenfra.
Efter den enkle vejledning på Handlebars-webstedet opretter vi vores skabelonfunktion som denne:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Så i vores forloop kalder vi vores nye skabelonfunktion med objektet (konteksten), der indeholder en enkelt film. HTML'en returneres, og vi føjer den til siden.
var html = template(data.movies(i)); $("#movies").append(html);Vi tager også skabelonen i denne video og filmer den til en anden pen. Det betyder bare, hvordan du sandsynligvis ville bryde din egen kode i et rigtigt projekt. Skabelonen ville næsten helt sikkert være en "inkludere" af en slags.
Her endte vi:
Se Pen mdCjJ af Chris Coyier (@chriscoyier) på CodePen
Vi har taget nogle gode fremskridt her mod bedre kode, men vi har mere at gå for at få det helt rent.