Share
Als de gegevens van uw site regelmatig veranderen, wilt u misschien Handlezen bekijken. Handlebar is een sjabloonprocessor die op dynamische wijze uw HTML-pagina genereert, waardoor u tijd bespaart om handmatige updates uit te voeren. In deze zelfstudie zal ik u kennis laten maken met Handlebars en u leren hoe u een basissjabloon voor uw site kunt maken.
Er zijn twee hoofdredenen waarom u een sjabloon voor uw site wilt maken. Allereerst raadt het bouwen van een sjabloon u aan om de op logica gebaseerde code te scheiden van de werkelijke weergave, zodat u zich aan een weergave- / controllerpatroon kunt houden. Ten tweede houden sjablonen uw code schoon en onderhoudenbaar, wat het proces van het updaten van uw site op zijn beurt een fluitje van een cent maakt. U maakt geen site met Handlebars. In plaats daarvan maakt u richtlijnen en structuren die bepalen hoe de site eruit moet zien zonder dat u zich hoeft te concentreren op de gegevens van een pagina. Laten we een paar basisprincipes bespreken.
Stuur genereert uw HTML door een JSON-structuur te nemen en deze door een sjabloon te leiden. Deze sjablonen zijn meestal geschreven in normale HTML en zijn voorzien van plaatshouders waarmee u gegevens kunt injecteren, indien nodig. De volgende sjabloon begroet bijvoorbeeld de gebruiker wanneer deze zich aanmeldt:
Welkom terug, name
De naam attribuut is waar de naam van de gebruiker op de pagina zal worden geïnjecteerd. Deze tijdelijke aanduiding komt overeen met een eigenschap in de JSON-structuur van de gegevens. Dit is het meest eenvoudige voorbeeld dat mogelijk is, maar je zult snel zien dat al het andere in feite neerkomt op dit eenvoudige concept. Laten we verder gaan met het verwerken van arrays.
Stuur wordt geleverd met een aantal ingebouwde helpers om u te helpen bij het werken met meer complexe gegevens. Een van deze helpers is de elk helper. Deze helper itereert door een array en stelt u in staat om een dynamisch HTML-element per array-element te maken. In de volgende sjabloon worden bijvoorbeeld de gegevens van een array weergegeven met een lijst met de lokale concerten in mijn regio:
| Lokale concerten |
|---|
| deze |
Zoals u kunt zien, is deze code veel schoner dan conventionele code, zoals het gebruik van een lus in PHP of JavaScript om HTML aan een variabele toe te voegen. Stuur is niet opdringerig, en dit is wat Stuur zo toegankelijk maakt. U merkt mogelijk ook dat we de kenmerknaam gebruiken, deze, om het huidige array-element op te halen in de elk lus.
Dit voorbeeld is goed voor een reeks eenvoudige waarden, maar hoe gaat u om met meer complexe gegevens? Nou, je doet in essentie hetzelfde. We gaan bijvoorbeeld een sjabloon schrijven voor de volgende gegevens:
[Name: "Band", Datum: "14 augustus 2012", Albums: [Name: "Generic Name", Name: "Something Else !!" ], Name: "Other Guys", Date: "22 aug 2012" Albums: [Name: "Album One"]]
We kunnen deze informatie eenvoudig weergeven met behulp van de volgende sjabloon:
| Band naam | Datum | Album naam |
|---|---|---|
| Naam | Datum | Albums.0.Name |
U kunt uw sjabloon opslaan in a
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
Gemakshalve kunt u uw sjabloon opslaan in a 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:
Als de gegevens van uw site regelmatig veranderen, wilt u misschien Handlezen bekijken.
Dit is de volledige code voor het compileren en genereren van HTML-code van een sjabloon. U kunt de JSON-gegevens van de API technisch direct in Handlebars doorgeven, maar u kunt tegen problemen met de cross-origin aanlopen. In plaats van het uitvoeren van een soort hack of het gebruiken van PHP om de gegevens in een JavaScript-variabele te "echoën", besloot ik om dat alles in een apart bestand te plaatsen: Recipe.php. Dus voordat we beginnen met het bouwen van de sjabloon, laten we eens naar dat PHP-bestand gaan kijken.
De Yummly API is vrij eenvoudig. Er is geen uitgebreid authenticatiesysteem; je hoeft je alleen maar aan te melden, een aantal inloggegevens te krijgen en deze in de URL in te voegen. Je kunt de gegevens direct weergeven als je dat wilt, maar ik wil een beetje meer gedetailleerde informatie over elk recept. Daarom zal ik de gegevens van de eerste API-aanroep verwerken en een tweede verzoek doen voor elk recept. Hier is het volledige PHP-script:
wedstrijden; // Doorloop de recepten en krijg het volledige recept voor elke foreach ($ recepten als $ recept) $ ID = $ Recept-> id; $ R = json_decode (file_get_contents ("http://api.yummly.com/v1/api/recipe/". $ ID. "? _App_id =". $ UserID. "& _App_key =". $ UserKey. "& Images = large ")); // Dit zijn de gegevens die we gaan doorgeven aan onze Template array_push ($ Json, array (Name => $ R-> naam, Ingredients => $ R-> ingredientsLines, Image => $ R-> images [0] -> hostedLargeUrl, Opbrengst => $ R-> opbrengst, Flavours => $ R-> smaken, Source => array (Name => $ R-> source-> sourceDisplayName, Url => $ R-> source-> sourceRecipeUrl ))); // Print de laatste JSON-object echo json_encode ($ Json); ?> Door uw site te bouwen met een Handlebars-sjabloon, kunt u de code van een volledige site in slechts enkele regels produceren. Hier is de volledige sjabloon:
Laten we deze code doornemen. De eerste zeven regels zijn alleen het logo bovenaan de pagina. Vervolgens maken we voor elk recept een recept 'kaart' met een afbeelding, naam en ingrediënten.
De Yummly API retourneert een lijst met smaakgegevens (bijv. Hoe zoet, zuur, gekruid, enz.) Voor elk artikel. Ik schreef een functie-helper, genaamd getFlavor die deze info opneemt en de meest dominante smaak in het gerecht teruggeeft. Om deze sjabloon te laten werken, moeten we de. Laden getFlavor helpen in het stuur voordat u de sjabloon analyseert. Dus voeg aan het begin van het tweede scriptgedeelte de volgende code toe vóór de Ajax-code:
Handlebars.registerHelper ("getFlavor", functie (FlavorsArr) var H = 0; var Name = "; for (var F in FlavorsArr) if (FlavorsArr [F]> H) H = FlavoursArr [F]; Name = F; terug "Dit gerecht heeft een" + Name + "Smaak";); Nu, wanneer het stuur ziet getFlavor, het roept de bijbehorende functie op en haalt de smaakinformatie op.
Op dit punt ben je vrij om te spelen en de sjabloon te ontwerpen zoals je wilt, maar je zult waarschijnlijk zien dat dit proces traag is. Dit komt voornamelijk door de drie API-aanroepen voordat Handlebars de pagina laadt. Uiteraard is dit niet ideaal, maar het vooraf samenstellen van uw sjabloon kan helpen.
Je hebt twee verschillende opties, als het gaat om stuur. De eerste is om gewoon de feitelijke sjabloon te precompileren. Dit verkort de laadtijd en u hoeft de Handlebars-compiler niet bij uw pagina te voegen.
Dit resulteert ook in een kleinere bestandsgrootte, maar dit helpt niet echt in ons scenario.
Ons probleem is de communicatie tussen de browser en de API. Als u uw sjabloon wel wilt compileren, kunt u het pakket Node.js via downloaden NPM met het volgende commando:
npm stuur installeert -g
Mogelijk moet je dit als root doen (dus voeg 'sudo' toe vóór de opdracht). Na installatie kunt u een bestand voor uw sjabloon maken en het als volgt compileren:
stuur demo.handlebars -f demo.js
U moet uw sjabloonbestand een geven .stuur uitbreiding. Dit is niet verplicht, maar als je het zoiets noemt demo.html, dan zal de naam van de sjabloon "demo.html" zijn als apposed op alleen maar "demo". Nadat u uw sjabloon een naam hebt gegeven, voegt u eenvoudig het uitvoerbestand samen met de runtimeversie van Handlebars (u kunt de standaardversie gebruiken, maar deze is groter) en typ het volgende:
var template = Handlebars.templates ['demo']; var html = template (Your Json Data Here);
De
tenzijverklaring is ... in wezen een omgekeerdealsuitspraak.
Maar, zoals ik al eerder zei, dit helpt ons niet echt in dit scenario. Wat kunnen we dan doen? Wel, we kunnen het volledige bestand precompileren en uitvoeren. Dit maakt het zo dat we de sjabloon kunnen uitvoeren met gegevens en de uiteindelijke HTML-uitvoer kunnen opslaan - caching, met andere woorden. Dit versnelt de laadtijd van uw toepassing drastisch. Jammer genoeg heeft client-side JavaScript geen IO-mogelijkheden voor bestanden. Dus, de eenvoudigste manier om dit te bereiken, is door de HTML-code naar een tekstvak uit te voeren en deze handmatig op te slaan. Houd rekening met de richtlijnen van een API voor caching. De meeste API's hebben een maximale hoeveelheid tijd waarop gegevens kunnen worden gecacht; Zorg ervoor dat u die informatie vindt voordat u statische pagina's opslaat.
Dit is een korte inleiding tot het Stuur. Voorwaarts kijkend, kunt u in "Partials" kijken - kleine sjablonen die als functies kunnen worden gebruikt. Zoals altijd, voel je vrij om een opmerking of vraag achter te laten in de commentaarsectie hieronder.
