Jäime viimases videos natuke sassi läinud segadusega pooleli. Kõik ühes JavaScripti plokis segasime andmete hankimist, kuvamis- ja äriloogikat ning malle. Selles videos hakkame neid asju lõhkuma, et saada meid korrastatuma, hooldatavama ja arusaadavama koodi juurde. Suur osa sellest on mallimine.
Võtke # 1 meie mallide seiklus on juhtraua abil. Juhtraua lähenemine on nutikas, kuna malli HTML on sõna otseses mõttes HTML-i lisatud. Kasutate spetsiaalset silti. See teeb kena autoritöö, kuna saame lahti stringide liitmise kohmakusest (kõik need jutumärgid ja plussid) ja saame HTML-i jaoks oma redaktori pakutava kena süntaksi esiletõstmise. Meie mall nägi lõpuks välja selline:
((movieTitle))
((movieDirector))
Pange tähele imelikku typeatribuuti skripti sildil. See takistab selle sildi sisu käivitamist. Lõppkokkuvõttes tõmbab juhtraua lihtsalt selle sildi sisikonna välja ja muudab selle malli funktsiooniks. Päris nutikas viis sellega päriselt hakkama saada.
Need bitid nagu ((movieTitle))on olulised osad. Lõpuks edastame objekti loodavale mallifunktsioonile ja selle objekti omadused vastavad nendele kohahoidjabittidele. Juhtraua nimi on arvatavasti sellepärast, et need kohahoidjabitid on mähitud lokkis traksidega, mis näevad ülalt veidi välja nagu juhtraua.
Pärast juhtraua veebisaidi lihtsat õpetust loome oma mallifunktsiooni järgmiselt:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Seejärel forkutsume oma tsüklis oma uut mallifunktsiooni koos objekti (kontekstiga), mis sisaldab ühte filmi. HTML tagastatakse ja lisame selle lehele.
var html = template(data.movies(i)); $("#movies").append(html);Samuti võtame selle video malli ja filmime selle teise pliiatsiga. See lihtsalt tähistab seda, kuidas saaksite oma koodi reaalses projektis laiali jagada. Mall oleks peaaegu kindlasti mingisugune “kaasamine”.
Siia jõudsime:
Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen mdCjJ-i
Oleme siin teinud häid samme parema koodi poole, kuid selle täiusliku puhtuse saamiseks on vaja veel teha.