Share
Se i dati del tuo sito cambiano regolarmente, ti consigliamo di dare un'occhiata a Handlebars. Handlebars è un processore di template che genera dinamicamente la tua pagina HTML, risparmiando tempo per l'esecuzione degli aggiornamenti manuali. In questo tutorial, ti presenterò a Manubri e ti insegnerò come creare un modello di base per il tuo sito.
Esistono due motivi principali per cui desideri creare un modello per il tuo sito. Innanzitutto, la creazione di un modello ti incoraggia a separare il codice basato sulla logica dalla vista effettiva, aiutandoti ad aderire a un modello Visualizza / Controller. In secondo luogo, i modelli mantengono il tuo codice pulito e gestibile, il che, a sua volta, rende il processo di aggiornamento del tuo sito un gioco da ragazzi. Non si crea un sito con Handlebars. Invece, crei linee guida e strutture che stabiliscono come dovrebbe apparire il sito senza concentrarsi sui dati di una pagina. Copriamo alcune delle nozioni di base.
Handlebars genera il tuo HTML prendendo una struttura JSON e eseguendola attraverso un modello. Questi modelli sono scritti principalmente in HTML standard e sono pieni di segnaposti che consentono di inserire dati, se necessario. Ad esempio, il seguente modello saluta l'utente quando effettua il login:
Bentornato, nome
Il nome attributo è dove il nome dell'utente sarà iniettato nella pagina. Questo segnaposto corrisponde a una proprietà nella struttura JSON dei dati. Questo è l'esempio più semplice possibile, ma presto vedrai che tutto il resto si riduce fondamentalmente a questo semplice concetto. Passiamo alla gestione degli array.
Handlebars viene fornito con alcuni helper integrati per aiutarti a lavorare con dati più complessi. Uno di questi aiutanti è il ogni aiutante. Questo helper itera attraverso un array e ti consente di creare HTML dinamico, per elemento di array. Ad esempio, il seguente modello visualizza i dati di una matrice che contiene un elenco dei concerti locali in esecuzione nella mia area:
| Concerti locali |
|---|
| Questo |
Come puoi vedere, questo codice è molto più pulito del codice convenzionale, come l'utilizzo di un loop in PHP o JavaScript per aggiungere HTML a una variabile. I manubri non sono invadenti, e questo è ciò che rende Manubrio così accessibile. Si può anche notare che usiamo il nome dell'attributo, Questo, per recuperare l'elemento dell'array corrente nel ogni ciclo continuo.
Questo esempio è valido per una serie di valori semplici, ma come gestisci dati più complessi? Bene, in pratica fai la stessa cosa Ad esempio, scriveremo un modello per i seguenti dati:
[Name: "Band", Data: "14 ago 2012", Album: [Name: "Nome generico", Name: "Something Else !!" ], Name: "Other Guys", Data: "22 ago 2012" Album: [Name: "Album One"]]
Possiamo facilmente visualizzare queste informazioni usando il seguente modello:
| Nome della banda | Data | Nome dell'album |
|---|---|---|
| Nome | Data | Albums.0.Name |
È possibile memorizzare il modello 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
Per comodità, è possibile memorizzare il modello 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:
Se i dati del tuo sito cambiano regolarmente, ti consigliamo di dare un'occhiata a Handlebars.
Questo è il codice completo per compilare e generare codice HTML da un modello. È possibile passare tecnicamente i dati JSON dall'API direttamente in Handlebars, ma si verificano problemi di origine incrociata. Invece di eseguire una sorta di hack o usare PHP per "echo" i dati in una variabile JavaScript, ho deciso di mettere tutto ciò in un file separato: Recipe.php. Quindi, prima di iniziare a costruire il modello, diamo un'occhiata a quel file PHP.
L'API di Yummly è piuttosto semplice. Non esiste un sistema di autenticazione elaborato; devi solo registrarti, ottenere alcune credenziali e inserirle nell'URL. Puoi fare direttamente eco ai dati se vuoi, ma voglio informazioni un po 'più dettagliate su ogni ricetta. Pertanto, elaborerò i dati dalla prima chiamata API e effettuerò una seconda richiesta per ogni ricetta. Ecco lo script PHP completo:
le partite; // Sfoglia le ricette e ottieni la ricetta completa per ogni foreach ($ Ricette come $ Ricetta) $ ID = $ Ricetta-> id; $ R = json_decode (file_get_contents ("http://api.yummly.com/v1/api/recipe/". $ ID. "? _App_id =". $ UserID. "& _App_key =". $ UserKey. "& Images = large ")); // Questi sono i dati che stiamo per passare al nostro Template array_push ($ Json, array (Nome => $ R-> nome, Ingredienti => $ R-> ingredienteLine, Immagine => $ R-> immagini [0] -> hostedLargeUrl, Yield => $ R-> yield, Flavors => $ R-> sapori, Source => array (Name => $ R-> source-> sourceDisplayName, Url => $ R-> source-> sourceRecipeUrl ))); // Stampa l'oggetto JSON finale echo json_encode ($ Json); ?> Creando il tuo sito con un modello di Handlebars, puoi produrre il valore di un intero sito in poche righe. Ecco l'intero modello:
Esaminiamo questo codice. Le prime sette righe sono solo il logo nella parte superiore della pagina. Quindi per ogni ricetta, creiamo una "carta" delle ricette con un'immagine, un nome e gli ingredienti.
L'API Yummly restituisce un elenco di dati relativi al sapore (ad esempio, dolce, aspro, piccante ecc.) Per ciascun articolo. Ho scritto un aiutante di funzione, chiamato getFlavor che prende queste informazioni e restituisce il sapore più dominante nel piatto. Affinché questo modello funzioni, è necessario caricare il file getFlavor aiuto in Handlebars prima di analizzare il modello. Quindi, all'inizio della seconda sezione dello script, aggiungi il seguente codice prima del codice Ajax:
Handlebars.registerHelper ("getFlavor", function (FlavorsArr) var H = 0; var Name = "; for (var F in FlavorsArr) if (FlavorsArr [F]> H) H = FlavorsArr [F]; Nome = F; return "Questo Dish ha un" + Name + "Flavor";); Ora, ogni volta che vede Handlebars getFlavor, chiama la funzione associata e recupera le informazioni sul sapore.
A questo punto, sei libero di giocare e di progettare il modello come preferisci, ma molto probabilmente vedrai che questo processo è lento. Ciò è dovuto principalmente alle tre chiamate API prima che Handlebars carichi la pagina. Ovviamente, questo non è l'ideale, ma la pre-compilazione del tuo modello può aiutarti.
Hai due diverse opzioni, quando si tratta di Handlebar. Il primo è solo precompilare il modello attuale. Ciò riduce il tempo di caricamento e non dovrai includere il compilatore di Handlebars con la tua pagina.
Ciò si traduce anche in una dimensione del file più piccola, ma questo non aiuta molto nel nostro scenario.
Il nostro problema è la comunicazione tra il browser e l'API. Se si desidera precompilare il modello, è possibile scaricare il pacchetto Node.js npm con il seguente comando:
npm install manubri -g
Potrebbe essere necessario farlo come root (ad esempio aggiungere 'sudo' prima del comando). Una volta installato, puoi creare un file per il tuo modello e compilarlo in questo modo:
manubri demo.handlebars -f demo.js
Dovresti dare il tuo file modello a .manubrio estensione. Questo non è obbligatorio, ma se lo dai un nome a qualcosa del genere demo.html, quindi il nome del modello sarà "demo.html" come apposto solo alla "demo". Dopo aver assegnato il nome al modello, includi semplicemente il file di output insieme alla versione di runtime di Handlebars (puoi utilizzare la versione normale, ma è più grande) e digita quanto segue:
var template = Handlebars.templates ['demo']; var html = template (Your Json Data Here);
Il
salvo chela dichiarazione è ... essenzialmente un invertitoSedichiarazione.
Ma, come ho detto prima, questo non ci aiuta in questo scenario. Cosa possiamo fare allora? Bene, possiamo precompilare e produrre l'intero file. In questo modo possiamo eseguire il modello con i dati e salvare l'output HTML finale: il caching, in altre parole. Ciò velocizza drasticamente il tempo di caricamento dell'applicazione. Sfortunatamente, JavaScript sul lato client non ha capacità di file IO. Quindi, il modo più semplice per farlo è quello di emettere l'HTML in una casella di testo e salvarlo manualmente. Essere a conoscenza delle linee guida dell'API sulla memorizzazione nella cache. La maggior parte delle API ha una quantità massima di tempo per cui i dati possono essere memorizzati nella cache; assicurati di trovare tali informazioni prima di salvare pagine statiche.
Questa è stata una rapida introduzione al manubrio. Andando avanti, puoi guardare in "Partials" - piccoli modelli che possono essere usati come funzioni. Come sempre, sentitevi liberi di lasciare un commento o una domanda nella sezione commenti qui sotto.
