Am rămas în ultimul videoclip cu un pic de încurcătură. Într-un singur bloc de JavaScript, amestecam recuperarea datelor, afișarea și logica de afaceri și șabloanele. În acest videoclip, vom începe să descompunem aceste lucruri pentru a ne duce pe un cod mai organizat, mai ușor de întreținut și mai ușor de înțeles. O mare parte din aceasta este modelarea.
Luați locul 1 în aventura noastră de modelare este cu ghidonele. Ghidonele au o abordare inteligentă prin faptul că HTML pentru șablon este literalmente introdus în HTML. Folosiți o etichetă specială . Este o creație plăcută pentru că putem scăpa de stângacimea concatenării șirurilor (toate acele ghilimele și descrieri) și obținem evidențierea frumosă a sintaxei pentru HTML pe care editorul dvs. o oferă. Șablonul nostru în cele din urmă arăta astfel:
((movieTitle))
((movieDirector))
Rețineți typeatributul ciudat de pe eticheta scriptului. Aceasta împiedică executarea conținutului acelei etichete. În cele din urmă, ghidonele pur și simplu elimină curajul acestei etichete și o transformă într-o funcție șablon. Mod destul de inteligent de a face față cu adevărat.
Acești biți ((movieTitle))sunt părțile importante. În cele din urmă, transmitem un obiect funcției de șablonare care se creează, iar proprietățile acelui obiect corespund acestor biți de substituent. Ghidon se numește ghidon, probabil, deoarece acele biți de substituent sunt înfășurate în acolade care arată un pic ca ghidonul de sus.
Urmând tutorialul simplu de pe site-ul Handlebars, creăm funcția noastră de șablonare astfel:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Apoi, în forbucla noastră , numim noua noastră funcție de șablonare cu obiectul (contextul) care conține un singur film. Codul HTML va fi returnat și îl adăugăm la pagină.
var html = template(data.movies(i)); $("#movies").append(html);De asemenea, luăm șablonul din acest videoclip și îl filmăm la un stilou diferit. Asta înseamnă doar că probabil ați rupe propriul cod într-un proiect real. Șablonul ar fi aproape sigur o „includere” de un fel.
Iată unde am ajuns:
Vedeți Pen mdCjJ de Chris Coyier (@chriscoyier) pe CodePen
Am făcut câțiva pași buni aici către un cod mai bun, dar mai avem de făcut pentru a-l curăța perfect.