Share
Wenn sich die Daten Ihrer Site regelmäßig ändern, möchten Sie vielleicht einen Blick auf Handlebars werfen. Handlebars ist ein Vorlagenprozessor, der Ihre HTML-Seite dynamisch generiert und so Zeit für manuelle Updates einspart. In diesem Lernprogramm werde ich Ihnen die Handlebars vorstellen und Sie lernen, wie Sie eine grundlegende Vorlage für Ihre Site erstellen.
Es gibt zwei Hauptgründe, warum Sie eine Vorlage für Ihre Site erstellen möchten. Wenn Sie eine Vorlage erstellen, müssen Sie zunächst den logikbasierten Code von der tatsächlichen Ansicht trennen, sodass Sie ein View / Controller-Muster einhalten können. Zweitens halten Vorlagen Ihren Code sauber und pflegbar, was die Aktualisierung Ihrer Website zu einem Kinderspiel macht. Sie erstellen keine Site mit Handlebars. Stattdessen erstellen Sie Richtlinien und Strukturen, die bestimmen, wie die Site aussehen soll, ohne sich auf die Daten einer Seite zu konzentrieren. Lassen Sie uns einige der Grundlagen besprechen.
Handlebars generiert Ihren HTML-Code, indem Sie eine JSON-Struktur verwenden und durch eine Vorlage ausführen. Diese Vorlagen sind zumeist in normalem HTML geschrieben und mit Platzhaltern gespickt, mit denen Sie bei Bedarf Daten einfügen können. Beispielsweise begrüßt die folgende Vorlage den Benutzer, wenn er sich anmeldet:
Willkommen zurück, name
Das Name Attribut ist, wo der Name des Benutzers in die Seite eingefügt wird. Dieser Platzhalter entspricht einer Eigenschaft in der JSON-Struktur der Daten. Dies ist das einfachste Beispiel, aber Sie werden bald feststellen, dass alles andere auf dieses einfache Konzept hinausläuft. Fahren wir mit dem Umgang mit Arrays fort.
Im Lieferumfang der Lenkstange sind einige integrierte Helfer enthalten, die Sie bei der Arbeit mit komplexeren Daten unterstützen. Einer dieser Helfer ist der jeder Helfer. Dieser Helfer durchläuft ein Array und ermöglicht es Ihnen, dynamisches HTML pro Array-Element zu erstellen. Die folgende Vorlage zeigt beispielsweise die Daten eines Arrays an, die eine Liste der lokalen Konzerte enthalten, die in meinem Bereich gespielt werden:
| Lokale Konzerte |
|---|
| diese |
Wie Sie sehen, ist dieser Code viel sauberer als herkömmlicher Code, z. B. die Verwendung einer Schleife in PHP oder JavaScript, um HTML an eine Variable anzuhängen. Lenker ist nicht aufdringlich, und das macht Lenker so zugänglich. Möglicherweise stellen Sie auch fest, dass wir den Attributnamen verwenden, diese, das aktuelle Array-Element in der jeder Schleife.
Dieses Beispiel eignet sich für ein Array einfacher Werte, aber wie gehen Sie mit komplexeren Daten um? Nun, Sie machen im Wesentlichen dasselbe. Zum Beispiel schreiben wir eine Vorlage für die folgenden Daten:
[Name: "Band", Datum: "14. August 2012", Alben: [Name: "Generic Name", Name: "Etwas anderes !!" ], Name: "Other Guys", Datum: "22. August 2012" Alben: [Name: "Album One"]]
Wir können diese Informationen einfach mit der folgenden Vorlage anzeigen:
| Band-Name | Datum | Name des Albums |
|---|---|---|
| Name | Datum | Albums.0.Name |
Sie können Ihre Vorlage in einem Ordner speichern
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
Sie können Ihre Vorlage in einem Ordner speichern 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:
Wenn sich die Daten Ihrer Site regelmäßig ändern, möchten Sie vielleicht einen Blick auf Handlebars werfen.
Dies ist der vollständige Code zum Kompilieren und Generieren von HTML-Code aus einer Vorlage. Sie können die JSON-Daten von der API aus technisch direkt an Handlebars übergeben, aber Sie haben Probleme mit dem Ursprungspunkt. Anstatt irgendeine Art von Hack auszuführen oder PHP zu verwenden, um die Daten in einer JavaScript-Variablen zu "echo", entschied ich mich, das alles in einer separaten Datei zu speichern: Rezept.php. Bevor wir mit dem Erstellen der Vorlage beginnen, sehen wir uns diese PHP-Datei an.
Die Yummly-API ist ziemlich einfach. Es gibt kein ausgefeiltes Authentifizierungssystem. Sie müssen sich nur anmelden, einige Anmeldeinformationen abrufen und diese in die URL einfügen. Sie können die Daten auch direkt wiedergeben, wenn Sie möchten, aber ich möchte ein wenig detailliertere Informationen zu jedem Rezept. Daher werde ich die Daten des ersten API-Aufrufs verarbeiten und für jedes Rezept eine zweite Anforderung stellen. Hier ist das komplette PHP-Skript:
Streichhölzer; // Durchlaufen Sie die Rezepte und erhalten Sie ein vollständiges Rezept für jeden Foreach ($ Recipes as $ Recipe) $ ID = $ Recipe-> ID; $ R = json_decode (file_get_contents ("http://api.yummly.com/v1/api/recipe/". $ ID. "? _App_id =". $ UserID. "& _App_key =". $ UserKey. "& Images = large ")); // Dies sind die Daten, die wir an unser Template array_push übergeben werden ($ Json, array (Name => $ R-> name, Ingredients => $ R-> zutatenLines, Image => $ R-> images [0] -> hostedLargeUrl, Yield => $ R-> Ertrag, Flavors => $ R-> Flavours, Source => Array (Name => $ R-> source-> sourceDisplayName, Url => $ R-> source-> sourceRecipeUrl ))); // Das letzte JSON-Objekt ausdrucken echo json_encode ($ Json); ?> Wenn Sie Ihre Site mit einer Handlebars-Vorlage erstellen, können Sie den Code einer ganzen Site in nur wenigen Zeilen erstellen. Hier ist die gesamte Vorlage:
Lassen Sie uns diesen Code durchgehen. Die ersten sieben Zeilen sind nur das Logo oben auf der Seite. Für jedes Rezept erstellen wir dann eine Rezeptkarte mit Bild, Name und Zutaten.
Die Yummly-API gibt eine Liste von Flavour-Daten (d. H. Wie süß, sauer, würzig usw.) für jeden Artikel zurück. Ich habe einen Funktionshelfer geschrieben, angerufen getFlavor das nimmt diese Informationen und gibt den dominantesten Geschmack in der Schale zurück. Damit diese Vorlage funktioniert, müssen wir in die getFlavor Helfer in den Lenker, bevor Sie die Vorlage analysieren. Fügen Sie am Anfang des zweiten Skriptabschnitts den folgenden Code vor dem Ajax-Code hinzu:
Handlebars.registerHelper ("getFlavor", Funktion (FlavorsArr) var H = 0; var Name = "; für (var F in FlavorsArr) if (FlavoursArr [F]> H) H = FlavoursArr [F]; Name = F; return "Dieses Gericht hat einen" + Namen + "Geschmack";); Nun, wann immer die Lenkstange sieht getFlavor, Es ruft die zugehörige Funktion auf und ruft die Flavour-Informationen ab.
An dieser Stelle können Sie die Vorlage beliebig herumspielen und entwerfen, aber Sie werden höchstwahrscheinlich feststellen, dass dieser Prozess langsam ist. Dies ist hauptsächlich auf die drei API-Aufrufe zurückzuführen, bevor Handlebars die Seite lädt. Offensichtlich ist dies nicht ideal, aber das Vorkompilieren Ihrer Vorlage kann hilfreich sein.
Sie haben zwei verschiedene Optionen, wenn es um Lenker geht. Die erste besteht darin, die eigentliche Vorlage nur vorab zu kompilieren. Dadurch wird die Ladezeit verkürzt, und Sie müssen den Handlebars-Compiler nicht in Ihre Seite aufnehmen.
Dies führt auch zu einer geringeren Dateigröße, was in unserem Szenario jedoch nicht wirklich hilfreich ist.
Unser Problem ist die Kommunikation zwischen dem Browser und der API. Wenn Sie Ihre Vorlage vorkompilieren möchten, können Sie das Paket Node.js über herunterladen npm mit dem folgenden Befehl:
npm install-Lenker -g
Möglicherweise müssen Sie dies als root tun (d. H. Vor dem Befehl "sudo" hinzufügen). Nach der Installation können Sie eine Datei für Ihre Vorlage erstellen und wie folgt kompilieren:
Lenker demo.handlebars -f demo.js
Sie sollten Ihrer Vorlagendatei eine geben .Lenker Erweiterung. Dies ist nicht obligatorisch, aber wenn Sie es so nennen demo.html, Dann wird der Name der Vorlage "demo.html" lauten und nur "demo" entsprechen. Fügen Sie nach der Benennung Ihrer Vorlage einfach die Ausgabedatei zusammen mit der Laufzeitversion von Handlebars ein (Sie können die reguläre Version verwenden, die aber größer ist), und geben Sie Folgendes ein:
var template = Handlebars.templates ['Demo']; var html = template (Ihre Json-Daten hier);
Das
es sei dennAussage ist… im Wesentlichen ein umgekehrtesobAussage.
Aber wie gesagt, das hilft uns in diesem Szenario nicht wirklich. Was können wir dann tun? Nun, wir können die gesamte Datei vorkompilieren und ausgeben. Dies macht es so, dass wir die Vorlage mit Daten ausführen und die endgültige HTML-Ausgabe speichern können - mit anderen Worten: Caching. Dies beschleunigt die Ladezeit Ihrer Anwendung drastisch. Leider hat clientseitiges JavaScript keine E / A-Funktionen. Am einfachsten ist dies, wenn Sie den HTML-Code einfach in ein Textfeld ausgeben und manuell speichern. Beachten Sie die Richtlinien einer API zum Caching. Die meisten APIs haben eine maximale Zeit, für die Daten zwischengespeichert werden können. Stellen Sie sicher, dass Sie diese Informationen finden, bevor Sie statische Seiten speichern.
Dies war eine kurze Einführung in die Lenkstange. Im weiteren Verlauf können Sie unter "Partials" nachschauen, kleine Vorlagen, die wie Funktionen verwendet werden können. Wie immer können Sie gerne einen Kommentar oder eine Frage im Kommentarabschnitt hinterlassen.
