Share
Si les données de votre site changent régulièrement, consultez le Guidon. Handlebars est un processeur de modèles qui génère dynamiquement votre page HTML, vous permettant ainsi de gagner du temps lors de la mise à jour manuelle. Dans ce tutoriel, je vais vous présenter le guidon et vous apprendre à créer un modèle de base pour votre site..
Vous souhaitez créer un modèle pour votre site pour deux raisons principales. Tout d'abord, la construction d'un modèle vous encourage à séparer le code basé sur la logique de la vue réelle, en vous aidant à adhérer à un modèle View / Controller. Deuxièmement, les modèles maintiennent votre code propre et maintenable, ce qui facilite grandement le processus de mise à jour de votre site. Vous ne créez pas de site avec le guidon. Au lieu de cela, vous créez des directives et des structures qui déterminent l'apparence du site sans se focaliser sur les données d'une page. Couvrons quelques bases.
Handlebars génère votre code HTML en prenant une structure JSON et en l’exécutant à travers un modèle. Ces modèles sont principalement écrits en HTML normal et sont assortis d’espaces réservés vous permettant d’injecter des données, le cas échéant. Par exemple, le modèle suivant accueille l'utilisateur lorsqu'il se connecte:
Bienvenue, name
le prénom attribut est l'endroit où le nom de l'utilisateur sera injecté dans la page. Cet espace réservé correspond à une propriété de la structure JSON des données. C'est l'exemple le plus élémentaire possible, mais vous verrez bientôt que tout se résume essentiellement à ce concept simple. Passons à la manipulation des tableaux.
Le guidon est livré avec des aides intégrées pour vous aider à travailler avec des données plus complexes. L’un de ces assistants est le chaque assistant. Cet assistant effectue une itération dans un tableau et vous permet de créer du HTML dynamique, par élément de tableau. Par exemple, le modèle suivant affiche les données d'un tableau contenant une liste des concerts locaux en cours dans ma région:
| Concerts locaux |
|---|
| ce |
Comme vous pouvez le constater, ce code est beaucoup plus propre que le code conventionnel, comme l’utilisation d’une boucle en PHP ou JavaScript pour ajouter du code HTML à une variable. Le guidon n’est pas intrusif, et c’est ce qui rend le guidon si accessible. Vous pouvez également remarquer que nous utilisons le nom d'attribut, ce, pour récupérer l'élément de tableau actuel dans le chaque boucle.
Cet exemple est utile pour un tableau de valeurs simples, mais comment gérez-vous des données plus complexes? Eh bien, vous faites essentiellement la même chose. Par exemple, nous allons écrire un modèle pour les données suivantes:
[Nom: "Groupe", Date: "14 août 2012", Albums: [Nom: "Nom générique", Nom: "Quelque chose d'autre !!" ], Nom: "Autres gars", Date: "22 août 2012" Albums: [Nom: "Album Un"]]
Nous pouvons facilement afficher ces informations en utilisant le modèle suivant:
| Nom du groupe | Rendez-vous amoureux | Nom de l'album |
|---|---|---|
| Prénom | Rendez-vous amoureux | Albums.0.Name |
Vous pouvez stocker votre modèle dans 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
Pour plus de commodité, vous pouvez stocker votre modèle dans un répertoire. 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:
Si les données de votre site changent régulièrement, vous voudrez peut-être jeter un coup d'œil à Guidons.
C'est le code complet pour compiler et générer du code HTML à partir d'un modèle. Vous pouvez techniquement transférer les données JSON de l'API directement dans le Guidon, mais vous rencontrez des problèmes d'origine croisée. Au lieu d'effectuer une sorte de piratage ou d'utiliser PHP pour "faire écho" les données dans une variable JavaScript, j'ai décidé de mettre tout cela dans un fichier séparé: Recette.php. Donc, avant de commencer à construire le modèle, allons jeter un coup d'œil à ce fichier PHP.
L'API Yummly est assez simple. Il n’existe pas de système d’authentification élaboré; il vous suffit de vous inscrire, d'obtenir des informations d'identification et de les insérer dans l'URL. Vous pouvez directement faire écho des données si vous le souhaitez, mais je veux des informations un peu plus détaillées sur chaque recette. Par conséquent, je traiterai les données du premier appel API et ferai une deuxième demande pour chaque recette. Voici le script PHP complet:
allumettes; // Parcourez les recettes et obtenez la recette complète pour chaque opération (Recettes $ en tant que Recette $) $ 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 ")); // Voici les données que nous allons transmettre à notre modèle array_push ($ Json, array (Nom => $ R-> nom, Ingrédients => $ R-> ingrédientLines, Image => $ R-> images [0] -> hostingLargeUrl, Yield => $ R-> rendement, Flavors => $ R-> saveurs, Source => array (Nom => $ R-> source-> sourceDisplayName, Url => $ R-> source-> sourceRecipeUrl ))); // Affiche le dernier objet JSON echo json_encode ($ Json); ?> En construisant votre site avec un modèle de guidon, vous pouvez générer la totalité du code d'un site en quelques lignes seulement. Voici le modèle entier:
Passons en revue ce code. Les sept premières lignes ne sont que le logo en haut de la page. Ensuite, pour chaque recette, nous créons une «carte» de recette avec une image, un nom et les ingrédients..
L’API Yummly renvoie une liste de données de saveur (c’est-à-dire comment sucré, acide, épicé, etc.) pour chaque article. J'ai écrit un assistant de fonction, appelé getFlavor cela prend cette information et retourne la saveur la plus dominante dans le plat. Pour que ce modèle fonctionne, nous devons charger le getFlavor aide dans le guidon avant d’analyser le modèle. Donc, au début de la deuxième section de script, ajoutez le code suivant avant le code Ajax:
Handlebars.registerHelper ("getFlavor", fonction (FlavorsArr) var H = 0; var Nom = "; pour (var F dans FlavorsArr) if (FlavorsArr [H]> H) H = FlavorsArr [F]; Nom = F; return "Ce plat a un" + Nom + "Saveur";); Maintenant, chaque fois que le guidon voit getFlavor, il appelle la fonction associée et récupère les informations de saveur.
À ce stade, vous êtes libre de jouer et de concevoir le modèle comme vous le souhaitez, mais vous verrez probablement que ce processus est lent. Cela est principalement dû aux trois appels d'API avant que Handlebars ne charge la page. Évidemment, ce n’est pas idéal, mais la précompilation de votre modèle peut vous aider..
Vous avez deux options différentes en ce qui concerne le guidon. La première consiste à précompiler le modèle actuel. Cela réduit le temps de chargement et vous n'avez pas à inclure le compilateur Handlebars dans votre page..
Cela se traduit également par une taille de fichier plus petite, mais cela n'aide pas vraiment dans notre scénario..
Notre problème est la communication entre le navigateur et l'API. Si vous voulez précompiler votre modèle, vous pouvez télécharger le package Node.js via npm avec la commande suivante:
npm installer le guidon -g
Vous devrez peut-être le faire en tant que root (c’est-à-dire ajouter 'sudo' avant la commande). Une fois installé, vous pouvez créer un fichier pour votre modèle et le compiler comme suit:
guidon demo.handlebars -f demo.js
Vous devriez donner à votre fichier de modèle une .guidon extension. Ce n'est pas obligatoire, mais si vous le nommez quelque chose comme demo.html, alors le nom du template sera "demo.html", juste comme "demo". Après avoir nommé votre modèle, incluez simplement le fichier de sortie avec la version au moment de l'exécution de Handlebars (vous pouvez utiliser la version standard, mais elle est plus grande) et tapez ce qui suit:
var template = Handlebars.templates ['demo']; var html = template (Vos données Json ici);
le
sauf sidéclaration est… essentiellement un inversésidéclaration.
Mais, comme je l'ai déjà mentionné, cela ne nous aide pas vraiment dans ce scénario. Que pouvons-nous faire alors? Nous pouvons précompiler et sortir le fichier entier. Cela nous permet d’exécuter le modèle avec des données et d’enregistrer la sortie HTML finale - la mise en cache, en d’autres termes. Cela accélère considérablement le temps de chargement de votre application. Malheureusement, JavaScript côté client ne dispose pas de fonctionnalités d’IO de fichier. Le moyen le plus simple d'y parvenir consiste donc simplement à exporter le code HTML dans une zone de texte et à l'enregistrer manuellement. Tenez compte des instructions d'une API sur la mise en cache. La plupart des API ont une durée maximale pendant laquelle les données peuvent être mises en cache. assurez-vous de trouver cette information avant de sauvegarder des pages statiques.
Cela a été une introduction rapide au guidon. En allant de l'avant, vous pouvez regarder dans "Partials" - de petits modèles qui peuvent être utilisés comme des fonctions. Comme toujours, n'hésitez pas à laisser un commentaire ou une question dans la section commentaire ci-dessous.
