Vi slapp i den siste videoen med litt flokete rot. Alt i en blokk med JavaScript blandet vi datainnhenting, visning og forretningslogikk og mal. I denne videoen skal vi begynne å bryte disse tingene opp for å få oss på vei til mer organisert, vedlikeholdbar og forståelig kode. En stor del av det er malmaleriet.
Ta nummer 1 på vårt maleventyr er med styr. Håndtak har en smart tilnærming ved at HTML for malen bokstavelig talt er satt i HTML. Du bruker en spesiell tag. Det gir god forfatterskap fordi vi kan komme vekk fra den klønetheten ved strengkonkatenering (alle disse anførselstegnene og plussene) og få den fine syntaksuthevingen for HTML redaktøren din gir. Malen vår så til slutt ut slik:
((movieTitle))
((movieDirector))
Legg merke til den rare typeegenskapen på skriptekoden. Det forhindrer at innholdet i den taggen kjøres. Til syvende og sist styrer bare tarmene til denne koden og gjør den til en malfunksjon. Ganske smart måte å håndtere det egentlig på.
De bitene som ((movieTitle))er de viktige delene. Til slutt sender vi et objekt til malfunksjonen som blir opprettet, og egenskapene til objektet samsvarer med disse plassholderbitene. Styret heter antagelig fordi de plassholderbitene er pakket inn i krøllete bukseseler som ser litt ut som styret ovenfra.
Etter den enkle veiledningen på Handlebars-nettstedet lager vi vår malfunksjon slik:
var source = $("#movie-template").html(); var template = Handlebars.compile(source);Deretter forkaller vi vår nye malfunksjon med objektet (konteksten) som inneholder en enkelt film. HTML-en blir returnert, og vi legger den til siden.
var html = template(data.movies(i)); $("#movies").append(html);Vi tar også malen i denne videoen og filmer den til en annen penn. Det betyr bare hvordan du sannsynligvis vil bryte opp din egen kode i et ekte prosjekt. Malen vil nesten helt sikkert være et "inkludere" av noe slag.
Her havnet vi:
Se Pen mdCjJ av Chris Coyier (@chriscoyier) på CodePen
Vi har tatt noen gode fremskritt her mot bedre kode, men vi har mer å gå for å få det helt rent.