Share
Dacă datele site-ului dvs. se modifică în mod regulat, atunci vă recomandăm să aruncați o privire la Handlebars. Handlebars este un procesor șablon care generează în mod dinamic pagina dvs. HTML, economisind timp pentru a efectua actualizări manuale. În acest tutorial, vă prezint pe Handlebars și vă învăț cum să creați un șablon de bază pentru site-ul dvs..
Există două motive principale pentru care doriți să creați un șablon pentru site-ul dvs. Mai întâi de toate, construirea unui șablon vă încurajează să separați codul bazat pe logică din vizualizarea reală, ajutându-vă să aderați la un model de vizualizare / control. În al doilea rând, șabloanele mențin codul dvs. curat și întreținut, ceea ce, la rândul său, face ca procesul de actualizare a site-ului dvs. să fie o briză. Nu creați un site cu Handlebars. În schimb, creați linii directoare și structuri care dictează modul în care ar trebui să pară site-ul fără a se concentra asupra datelor unei pagini. Să acoperim unele dintre elementele de bază.
Handlebars generează codul dvs. HTML, luând o structură JSON și executându-l printr-un șablon. Aceste șabloane sunt scrise în cea mai mare parte în cod HTML obișnuit și sunt împodobite cu substituenți care vă permit să injectați date, după cum este necesar. De exemplu, următorul șablon întâmpină utilizatorul când se conectează:
Bun venit înapoi, name
Nume atributul este locul în care numele utilizatorului va fi injectat în pagină. Acest substituent corespunde cu o proprietate din structura JSON a datelor. Acesta este cel mai simplu exemplu posibil, dar veți observa în curând că orice altceva se reduce în mod esențial la acest concept simplu. Hai să mergem la manipularea magistralelor.
Handlebars vine cu unele ajutoare încorporate pentru a vă ajuta să lucrați cu date mai complexe. Unul dintre acești ajutoare este fiecare ajutor. Acest helper iterează printr-o matrice și vă permite să creați elemente HTML dinamice, pe elemente de matrice. De exemplu, următorul șablon afișează datele unui matrice care conține o listă a concertelor locale care se joacă în zona mea:
| Concerte locale |
|---|
| acest |
După cum puteți vedea, acest cod este mult mai curat decât codul convențional, cum ar fi utilizarea unei buclă în PHP sau JavaScript pentru a adăuga codul HTML la o variabilă. Handlebars nu este intruziv, și acest lucru face ca Handlebars atât de accesibile. De asemenea, ați putea observa că folosim numele atributului, acest, pentru a prelua elementul curent al matricei în fiecare buclă.
Acest exemplu este bun pentru o serie de valori simple, dar cum vă ocupați de date mai complexe? În mod esențial, faceți același lucru. De exemplu, vom scrie un șablon pentru următoarele date:
Nume: "Band", Data: "Aug 14th, 2012", Albume: Nume: "Nume generic", Nume: "Ceva altceva!" ], Nume: "Alți băieți", Data: "Aug 22nd, 2012" Albume: [Nume: "Albumul 1"]]]
Putem afișa cu ușurință aceste informații utilizând următorul șablon:
| Numele benzii | Data | Numele albumului |
|---|---|---|
| Nume | Data | Albums.0.Name |
Puteți să stocați șablonul într-un
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
Pentru confort, puteți să păstrați șablonul într-un 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:
Dacă datele site-ului dvs. se modifică în mod regulat, atunci vă recomandăm să aruncați o privire la Handlebars.
Acesta este codul complet pentru compilarea și generarea codului HTML dintr-un șablon. Puteți trece din punct de vedere tehnic datele JSON de la API direct în Handlebars, dar întâmpinați probleme de origine încrucișată. În loc să efectueze un fel de hack sau folosind PHP pentru a "echo" datele într-o variabilă JavaScript, am decis să puneți toate acestea într-un fișier separat: Recipe.php. Deci, înainte de a începe construirea șablonului, să mergem să aruncăm o privire la acel fișier PHP.
API-ul Yummly este destul de simplu. Nu există un sistem de autentificare elaborat; trebuie doar să vă înscrieți, să obțineți niște acreditări și să le inserați în URL. Puteți să faceți ecou direct datele, dacă doriți, dar vreau informații detaliate despre fiecare rețetă. Prin urmare, voi procesa datele de la primul apel API și voi face oa doua cerere pentru fiecare rețetă. Aici este scriptul PHP complet:
chibrituri; // Ciclul prin rețete și obțineți rețeta completă pentru fiecare președinte ($ Rețete ca $ Rețetă) $ ID = $ Rețetă-> id; $ R = json_decode (file_get_contents ("http://api.yummly.com/v1/api/recipe/". $ ID. "? _App_id =". $ UserID. "& _App_key =". $ UserKey ". „)); // Aceasta este data pe care o vom transmite catre Template-ul nostru array_push ($ Json, array (Nume => $ R-> nume, Ingredients => $ R-> ingredientLines, Image => $ R-> -> hostedLargeUrl, Randament => $ R-> randament, Flavors => $ R-> arome, Source => array (Name => $ R-> sursa-> sourceDisplayName, Url => $ R-> source-> sourceRecipeUrl ))); // Imprimați ultimul obiect JSON echo json_encode ($ Json); ?> Prin construirea site-ului dvs. cu un șablon Handlebars, puteți produce un cod complet al site-ului în doar câteva rânduri. Iată întregul șablon:
Să trecem prin acest cod. Primele șapte linii sunt doar sigla din partea de sus a paginii. Apoi, pentru fiecare rețetă, creăm o "carte" de rețetă cu o imagine, nume și ingrediente.
API-ul Yummly returnează o listă de date despre aromă (adică cât de dulce, acru, picant, etc ...) pentru fiecare element. Am scris o funcție de ajutor, numită getFlavor care ia această informație și returnează cea mai dominantă aromă în vas. Pentru ca acest șablon să funcționeze, trebuie să încărcați în getFlavor helper în Handlebars înainte de parsarea șablonului. Deci, la începutul celei de-a doua secțiuni de script, adăugați următorul cod înainte de codul Ajax:
Handlebars.registerHelper ("getFlavor", funcția (FlavorsArr) var H = 0; var Nume = "; pentru (var F în FlavorsArr) if FlavorsArr [F] F; întoarceți "Această mâncare are o aromă" + Nume + ";); Acum, ori de câte ori vede Handlebars getFlavor, el apelează funcția asociată și preia informațiile de aromă.
În acest moment, aveți libertatea de a juca și de a crea șabloanele pe care le doriți, dar cel mai probabil veți vedea că acest proces este lent. Acest lucru se datorează în principal celor trei apeluri API înainte ca Handlebars să încarce pagina. Evident, acest lucru nu este ideal, dar precompilarea șablonului vă poate ajuta.
Aveți două opțiuni diferite atunci când vine vorba de Handlebars. Primul este de a precompila doar șablonul real. Acest lucru reduce timpul de încărcare și nu va trebui să includeți compilatorul Handlebars cu pagina dvs..
De asemenea, aceasta are ca rezultat o dimensiune a fișierului mai mică, dar acest lucru nu ne ajută cu adevărat în scenariul nostru.
Problema noastră este comunicarea dintre browser și API. Dacă doriți să vă precompilați șablonul, puteți descărca pachetul Node.js prin NPM cu următoarea comandă:
npm instalați ghidon -g
Este posibil să aveți nevoie să faceți acest lucru ca root (adică adăugați "sudo" înaintea comenzii). Odată instalat, puteți crea un fișier pentru șablonul dvs. și îl puteți compila așa:
ghidonuri demo.handlebars -f demo.js
Ar trebui să dați fișierul șablonului a .ghidonul extensie. Acest lucru nu este obligatoriu, dar dacă îl numiți ceva asemănător demo.html, numele șablonului va fi "demo.html" așa cum este folosit doar pentru "demo". După ce ați numit șablonul, includeți pur și simplu fișierul de ieșire împreună cu versiunea de run-time a Handlebars (puteți utiliza versiunea obișnuită, dar este mai mare) și tastați următoarele:
var template = Handlebars.templates ['demo']; var html = șablon (Json Data aici);
dacă nudeclarația este ... în esență inversatădacăafirmație.
Dar, așa cum am menționat mai devreme, acest lucru nu ne ajută cu adevărat în acest scenariu. Ce putem face atunci? Putem precompila și afișa întregul fișier. Acest lucru face ca putem rula șablonul cu date și salvați ieșirea HTML finală - cache, cu alte cuvinte. Acest lucru accelerează drastic timpul de încărcare al aplicației. Din păcate, JavaScript de pe partea clientului nu are capabilități de IO pentru fișiere. Deci, cel mai simplu mod de a realiza acest lucru este de a exporta HTML-ul într-o casetă de text și ao salva manual. Fiți conștienți de orientările API privind cache-ul. Cele mai multe API-uri au un timp maxim pe care datele pot fi stocate în memoria cache; asigurați-vă că găsiți aceste informații înainte de a salva pagini statice.
Aceasta a fost o introducere rapidă la Handlebars. Mergând înainte, puteți privi în "Paralele" - șabloane mici care pot fi folosite ca și funcții. Ca întotdeauna, nu ezitați să lăsați un comentariu sau o întrebare în secțiunea de comentarii de mai jos.
