Vi slutade i den sista videon med lite trasslig röra. Allt i ett block av JavaScript blandade vi datainhämtning, visning och affärslogik och mallar. I den här videon ska vi börja bryta upp dessa saker för att få oss på väg till mer organiserad, underhållbar och förståelig kod. En stor del av det är mallar.
Ta # 1 på vårt malläventyr är med styr. Styr har ett smart tillvägagångssätt genom att HTML för mallen bokstavligen placeras i HTML. Du använder en speciell tagg. Det ger bra författning eftersom vi kan komma bort från den klumpiga strängkompatering (alla dessa citat och plussar) och få den fina syntaxmarkeringen för HTML som din redaktör tillhandahåller. Vår mall såg slutligen ut så här:
((movieTitle))
((movieDirector))
Lägg märke till det konstiga typeattributet på skripttaggen. Det förhindrar att innehållet i den taggen körs. I slutändan rycker handtagen ut tarmarna på den här taggen och förvandlar den till en mallfunktion. Ganska smart sätt att hantera det verkligen.
Dessa bitar ((movieTitle))är de viktiga delarna. Vi skickar till slut ett objekt till mallfunktionen som skapas, och egenskaperna för det objektet matchar dessa platshållarbitar. Styret heter förmodligen styret, eftersom dessa platshållarbitar är insvept i lockiga hängslen som ser lite ut som styr ovanifrån.
Efter den enkla guiden på Handlebars webbplats skapar vi vår mallfunktion så här:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Sedan inom vår forslinga kallar vi vår nya mallfunktion med objektet (sammanhanget) som innehåller en enda film. HTML-filen returneras och vi lägger till den på sidan.
var html = template(data.movies(i)); $("#movies").append(html);Vi tar också mallen i den här videon och filmar den till en annan penna. Det betyder bara hur du sannolikt skulle bryta upp din egen kod i ett riktigt projekt. Mallen skulle nästan säkert vara ett ”inkludera” av något slag.
Här hamnade vi:
Se Pen mdCjJ av Chris Coyier (@chriscoyier) på CodePen
Vi har gjort några bra steg här mot bättre kod, men vi har mer att gå för att få det helt rent.