Jätimme viimeisen videon hieman sekavalla sotkulla. Yhdessä JavaScript-lohkossa sekoitimme tietojen hakua, näyttö- ja liiketoimintalogiikkaa sekä malleja. Tässä videossa aiomme aloittaa näiden asioiden hajottamisen saadaksemme meidät järjestäytyneemmälle, ylläpidettävämmälle ja ymmärrettävämmälle koodille. Suuri osa siitä on mallipohja.
Valitse # 1 malliseikkailustamme ohjaustangoilla. Ohjaustangoilla on fiksu lähestymistapa siinä, että mallin HTML on kirjaimellisesti laitettu HTML: ään. Käytät erityistä tagia. Se tekee hienosta kirjoittamisesta, koska voimme päästä eroon merkkijonojen ketjutuksen kömpelöksestä (kaikki nämä lainaukset ja plussit) ja saada mukava syntaksin korostus HTML: lle, jonka editori tarjoaa. Mallimme näytti lopulta tältä:
((movieTitle))
((movieDirector))
Huomaa outo typeattribuutti komentotunnisteessa. Tämä estää kyseisen tagin sisällön suorittamisen. Viime kädessä ohjaustanko vain ryöstää tämän tagin suolet ja muuttaa sen mallitoiminnoksi. Melko fiksu tapa käsitellä sitä todella.
Nämä bitit kuten ((movieTitle))ovat tärkeitä osia. Viimeinkin välitämme objektin luotavalle mallitoiminnolle, ja kyseisen objektin ominaisuudet vastaavat näitä paikkamerkkibittejä. Ohjaustanko on oletettavasti nimeltään ohjaustanko, koska nämä paikkamerkkibitit on kääritty kiharaisiin pidikkeisiin, jotka näyttävät hieman ylhäältä päin olevilta ohjaustangoilta.
Seuraamalla yksinkertaista ohjaustankoa verkkosivustolla luomme mallitoimintomme seuraavasti:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Sitten forkutsumme silmukassamme uutta mallitoimintoa objektilla (konteksti), joka sisältää yhden elokuvan. HTML palautetaan, ja liitämme sen sivulle.
var html = template(data.movies(i)); $("#movies").append(html);Otamme myös tämän videon mallin ja elokuvamme sen toiseen kynään. Se vain osoittaa, kuinka todennäköisesti hajotat oman koodisi todellisessa projektissa. Malli olisi melkein varmasti jonkinlainen "sisälly".
Tässä päädyimme:
Katso Chris Coyierin (@chriscoyier) kynä mdCjJ CodePenistä
Olemme tehneet hyviä edistysaskeleita kohti parempaa koodia, mutta meillä on vielä paljon tehtävää, jotta se saadaan puhtaaksi.