Share
Hvis nettstedets data regelmessig endres, kan det hende du vil ta en titt på håndtakene. Håndtak er en malprosessor som dynamisk genererer HTML-siden din, og sparer deg tid fra å utføre manuelle oppdateringer. I denne opplæringen vil jeg introdusere deg til håndtak og lære deg hvordan du lager en grunnleggende mal for nettstedet ditt.
Det er to grunnleggende grunner til at du vil lage en mal for nettstedet ditt. Først av alt oppfordrer å bygge en mal at du skiller den logikkbaserte koden fra selve visningen, og hjelper deg å følge et visnings / kontrolleringsmønster. For det andre, maler holder koden ren og vedlikeholdbar, noe som igjen gjør prosessen med å oppdatere nettstedet ditt en bris. Du lager ikke et nettsted med styrer. I stedet lager du retningslinjer og strukturer som dikterer hvordan nettstedet skal se uten å fokusere på en side data. La oss dekke noen av grunnleggende.
Håndtak genererer HTML-en din ved å ta en JSON-struktur og kjøre den gjennom en mal. Disse malene er skrevet hovedsakelig i vanlig HTML, og er peppered med plassholdere som lar deg injisere data etter behov. For eksempel hilser følgende mal brukeren når de logger på:
Velkommen tilbake, name
De Navn Attributt er hvor brukerens navn vil bli injisert på siden. Denne plassholderen tilsvarer en egenskap i datas JSON-struktur. Dette er det mest grunnleggende eksemplet, men du vil snart se at alt annet i utgangspunktet koker ned til dette enkle konseptet. La oss gå videre til håndteringsarrayer.
Håndtakene leveres med noen innebygde hjelpere for å hjelpe deg med å jobbe med mer komplekse data. En av disse hjelperne er Hver hjelper. Denne hjelperen iterates gjennom en matrise og lar deg lage dynamisk HTML, per array element. For eksempel viser følgende mall en datas data som inneholder en liste over de lokale konsertene som spilles i mitt område:
| Lokale konserter |
|---|
| dette |
Som du kan se, er denne koden mye renere enn konvensjonell kode, for eksempel å bruke en loop i PHP eller JavaScript for å legge til HTML til en variabel. Håndtakene er ikke påtrengende, og det er det som gjør håndtakene så tilgjengelige. Du kan også merke at vi bruker attributtnavnet, dette, for å hente det nåværende arrayelementet i Hver sløyfe.
Dette eksempelet er bra for en rekke enkle verdier, men hvordan håndterer du mer komplekse data? Vel, du gjør det i det samme. For eksempel skal vi skrive en mal for følgende data:
[Navn: "Band", Dato: "14.aug.2012", Album: [Navn: "Generisk navn", Navn: "Noe annet!" ], Navn: "Andre gutter", Dato: "22. august 2012" Album: [Name: "Album One"]]
Vi kan enkelt vise denne informasjonen ved hjelp av følgende mal:
| Bandnavn | Dato | Albumnavn |
|---|---|---|
| Navn | Dato | Albums.0.Name |
Du kan lagre malen din i en
element and load it with JavaScript.
In Handlebars, you can even access nested properties, like in the example above (Albums.0.Name), and of course, you could have used another each loop to iterate over a band's albums. It's worth noting that besides the dot notation to access nested properties, you can also use "… /" to access a parent's properties.
What if there aren't any bands playing? You certainly don't want an empty table, and Handlebars thankfully provides if, else and unless helpers. The if and else statements work like most programming languages: if the object you pass is false or falsey, then the else statement executes. Otherwise, the if statement executes. The unless statement is pretty interesting; it's essentially an inverted if statement. If the expression is true, the unless block will NOT run. So let's incorporate these helpers into our code:
#if Bands
| Band Name | Date | Album Name |
|---|---|---|
| Name | Date | Albums.0.Name |
Handlebars gives you the ability to create your own custom helper. Simply register your function into Handlebars, and any template you compile afterwards can access your helper. There are two kinds of helpers that you can make:
Accentsconagua
if, each, etc. helpers. They allow you to change the context of what's inside.Let me show you a quick example of each. First, I'll register a function helper with the following code:
Handlebars.registerHelper("Max", function(A, B) return (A > B) ? A : B; ); The first argument passed to registerHelper() is the name of my customer helper; I'll use this name in the template. The second argument is the function associated with this helper.
Using this helper in a template is extremely simple:
Max 12 45
This template uses the Max helper, and passes the values 12 and 45 to the associated function. Handlebars function helpers support multiple parameters. You can directly insert numbers into the template itself, or you can use attributes from a JSON structure.
Now let's look at a custom block helper. Block helpers allow you to set the context before running the code contained within the block. For example, consider the following object:
Name: "Parent", Sub: Name: "Child"
In order to display both names, you can write a block helper that runs the template once with the parent's context, and once with the child's context. Here is the helper:
Handlebars.registerHelper("BothNames", function(context, options) return options.fn(context) + options.fn(context.Sub); ); And the template looks like this:
#BothNames thisName
/BothName
The hash tag before the helper's name tells Handlebars that this is a block helper, and you close the block not unlike you would an HTML tag. The options.fn function runs the section of template inside the block with whatever context you give it.
Now that we have the basics down, let's start creating a full demo.
You don't create a site with Handlebars.
The template we will build is for a recipe site. This will give you a good understanding of Handlebars, as it encompasses getting data from an API and passing it through a template.
We must first load our template script, but in order to do that, we need to create a new HTML file and include our Handlebars library:
Handlebars Demo
For enkelhets skyld kan du lagre malen din i en element and load it with JavaScript. This is much cleaner than storing it directly in a JavaScript variable.
Now let's discuss how this app is going to work. First, the app connects to an API (I'm using Yummly) to pull in information on some recipes. Next, we pass this info to Handlebars and run it through the template. Finally, we replace the body section with the newly generated HTML. It's a fairly straight forward process; so, let's start by adding a second script block right before the closing body tag, and instantiate an Ajax variable:
Hvis nettstedets data regelmessig endres, kan det hende du vil ta en titt på håndtakene.
Dette er den komplette koden for å samle og generere HTML-kode fra en mal. Du kan teknisk sett overføre JSON-dataene fra API-en direkte til håndterker, men du får problemer med kryss opprinnelse. I stedet for å utføre en slags hack eller ved hjelp av PHP for å "ekko" dataene til en JavaScript-variabel, bestemte jeg meg for å sette alt dette inn i en egen fil: Recipe.php. Så før vi begynner å bygge mal, la oss ta en titt på den PHP-filen.
Yummly API er ganske enkelt. Det er ingen utførlig autentiseringssystem; du må bare registrere deg, få noen legitimasjonsbeskrivelser, og sett dem inn i nettadressen. Du kan direkte ekko dataene hvis du vil, men jeg vil ha litt mer detaljert informasjon om hver oppskrift. Derfor behandler jeg dataene fra det første API-anropet og foretar en ny forespørsel for hver oppskrift. Her er det komplette PHP-skriptet:
fyrstikker; // syklus gjennom oppskrifter og få full oppskrift for hver foreach ($ oppskrifter som $ oppskrift) $ ID = $ oppskrift-> id; $ R = json_decode (file_get_contents ("http://api.yummly.com/v1/api/recipe/". $ ID. "? _App_id =". $ UserID. "& _App_key =". $ UserKey. "& Images = large ")); // Dette er dataene vi skal sende til vår mal array_push ($ Json, array (Name => $ R-> navn, Ingredients => $ R-> ingredientLines, Image => $ R-> bilder [0] -> hostedLargeUrl, Yield => $ R-> yield, Flavours => $ R-> smaker, Source => array (Name => $ R-> kilde-> sourceDisplayName, Url => $ R-> kilde-> sourceRecipeUrl ))); // Skriv ut det endelige JSON objektet echo json_encode ($ Json); ?> Ved å bygge nettstedet ditt med en håndtaksmal, kan du produsere et fullsteds nettstedskode i bare noen få linjer. Her er hele malen:
La oss løpe gjennom denne koden. De første syv linjene er bare logoen øverst på siden. Deretter oppretter vi for hver oppskrift et oppskriftskort med et bilde, navn og ingredienser.
Yummly API returnerer en liste over smakdata (dvs. hvor søt, sur, krydret, etc ...) for hvert element. Jeg skrev en funksjonshjelp, kalt getFlavor som tar denne informasjonen og gir den mest dominerende smaken i parabolen. For at denne mal skal fungere, må vi laste inn i getFlavor Hjelper til håndtak før du analyserer malen. Så i begynnelsen av den andre skripteksjonen, legg til følgende kode før Ajax-koden:
Handlebars.registerHelper ("getFlavor", funksjon (FlavorsArr) var H = 0; varnavn = "; for (var F i FlavorsArr) if (FlavorsArr [F]> H) H = FlavorsArr [F]; Navn = F; returnere "Denne parabolen har en" + Navn + "smak";); Nå, når håndtakene ser getFlavor, det kaller den tilknyttede funksjonen og henter smakinformasjonen.
På dette tidspunktet er du fri til å spille rundt og designe malen, men du vil mest sannsynlig se at denne prosessen er treg. Dette skyldes hovedsakelig de tre API-anropene før håndterker laster siden. Tydeligvis er dette ikke ideelt, men forkompilering av malen din kan hjelpe.
Du har to forskjellige alternativer, når det gjelder håndtak. Den første er å forkompilere selve malen. Dette reduserer belastningstiden, og du trenger ikke å inkludere håndterings-kompilatoren med siden din.
Dette resulterer også i en mindre filstørrelse, men dette hjelper ikke virkelig i vårt scenario.
Vårt problem er kommunikasjonen mellom nettleseren og API. Hvis du vil forkompilere malen din, kan du laste ned Node.js-pakken gjennom NPM med følgende kommando:
npm installere styrer -g
Du må kanskje gjøre dette som root (dvs. legg til 'sudo' før kommandoen). Når du er installert, kan du opprette en fil for malen din og kompilere den slik:
styrer demo.handlebars -f demo.js
Du bør gi din malfil a .styret forlengelse. Dette er ikke obligatorisk, men hvis du nevner det noe som demo.html, så vil malens navn være "demo.html" som bare "demo". Etter å ha navngitt malen, må du bare inkludere utdatafilen sammen med run-time-versjonen av håndtakene (du kan bruke den vanlige versjonen, men den er større) og skriv inn følgende:
var template = Handlebars.templates ['demo']; var html = mal (din json data her);
De
med mindreerklæring er ... i hovedsak en inverterthvisuttalelse.
Men som jeg tidligere nevnte, hjelper det oss ikke virkelig med dette scenariet. Hva kan vi da gjøre? Vel, vi kan forkompilere og sende ut hele filen. Dette gjør det slik at vi kan kjøre malen med data og lagre den endelige HTML-utgangen - caching, med andre ord. Dette øker hastigheten på belastningstiden for søknaden din drastisk. Dessverre har JavaScript-klientens side ikke fil IO-evner. Så, den enkleste måten å oppnå dette på er å bare sende HTML til en tekstboks og lagre den manuelt. Vær oppmerksom på en APIs retningslinjer for caching. De fleste APIer har maksimalt tid at dataene kan lagres sørg for å finne den informasjonen før du lagrer statiske sider.
Dette har vært en rask introduksjon til håndtakene. Fremover kan du se på "Deler" - små maler som kan brukes som funksjoner. Som alltid, vær så snill å legge igjen en kommentar eller et spørsmål i kommentarseksjonen nedenfor.
