Un regard dans: Handlebars.js

Dans ce post, nous allons regarder Handlebars, un moteur de template JavaScript basé sur Moustache. Il partage les mêmes fonctionnalités avec Moustache mais arbore un certain nombre de nouvelles fonctionnalités. Handlebars est un outil de modélisation pratique, en particulier pour l' affichage d'une série de données sous forme de JSON, qui est aujourd'hui un format de mise en forme de données commun utilisé dans une API d'application Web. Découvrez ce post d'introduction, qui explique vraiment bien JSON.

Dans cet article, nous allons vous présenter quelques fonctionnalités de base de Handlebars, et nous allons également travailler sur un exemple concret à la fin de cet article. Si c'est quelque chose que vous voulez savoir, alors commençons.

Commencer

Pour commencer, rendez-vous sur le site Handlebars et téléchargez le fichier de code source, handlebars.js . Placez le fichier dans un dossier approprié de votre projet. Lier le fichier à partir des documents HTML. Vous pouvez soit ajouter le lien à l'intérieur de l'étiquette de tête ou avant le .

Vous pouvez également créer un lien vers la source Handlebars à partir d'un CDN.

Quand c'est fait, nous pouvons commencer à créer un modèle.

Modèle de base

Ajoutons nos données: nom, âge et provenance de la personne.

 var dataSource = {"name": "Joe Bloggs", "age": "19", "from": "Royaume-Uni"} 

Ces données servent d'exemple. Comme mentionné précédemment, vous pouvez récupérer des formes de données similaires à partir de la plupart des applications Web proposant des API ouvertes, telles que Twitter, Instagram, Flickr et Dribbble, bien que vous disposiez de plus grandes lignes de données que celles indiquées ci-dessus. Alternativement, vous pouvez essayer JSON Generator pour générer des données aléatoires.

Le gabarit

Une fois que nous avons les données entre nos mains, nous pouvons créer le modèle pour placer ces données. Jetons un coup d'oeil au code suivant.

Le modèle Handlebars est défini dans une balise de script avec un type spécial: text/x-handlebars-template, et de préférence également avec un ID, car la sélection d' un élément avec JavaScript est techniquement plus simple et plus rapide que l'utilisation d'une classe .

Alors que chacune des données est déclarée entre accolades doubles, {{...}} ; ceci est également connu sous le nom d' expression Handlebars .

Cependant, avant que nous puissions voir le résultat dans le navigateur, nous devons compiler ces codes, fusionner les données dans le modèle.

Compiler

Stockons le modèle dans une variable JavaScript, comme ça.

 var template = $ ('# template'). html (); 

Nous avons ensuite mis la variable template dans Handlebars.compile() pour compiler le template.

 var compile = Handlebars.compile (template); 

La chose la plus importante du code ci-dessus est le nom de la variable, compile . Nous allons l'utiliser avec nos données pour générer le résultat final, comme ceci:

 var result = compilation (source de données); 

Enfin, nous le mettons dans #content utilisant la méthode jQuery .html() cette façon.

 $ ('# content'). html (résultat); 

Cela nous donnera le résultat suivant dans les navigateurs.

Échapper au HTML

Parfois, nos données peuvent contenir des balises HTML, par exemple:

 var dataSource = {"name": " Joe Bloggs ", "age": "19", "from": "Royaume-Uni"} 

Par défaut, Handlebars échappera à ces balises. Ils vont transformer le tag en leur entité, < deviendra < while > deviendra > . Nous obtiendrons donc un résultat inattendu, comme indiqué ci-dessous, dans les navigateurs.

Pour empêcher Handlebars de convertir les balises HTML en caractères d'entité et de les traiter telles quelles, nous utilisons des accolades triples {{{...}}} pour déclarer les données, comme suit:

 Bonjour, Mon nom est {{{name}}}. ... 

Voilà! La balise d'en-tête est maintenant rendue correctement; le nom est affiché en italique.

Assistant conditionnel

Handlebars prend en charge l' aide conditionnelle (ou également appelée fonction conditionnelle). Cette fonctionnalité est un ajout exclusif à Handlebars, non disponible dans Moustache. L'aide conditionnelle est utile pour empêcher le rendu des données si la valeur des données est vide. À titre d'exemple, supprimons la valeur de nos données d' age .

 var dataSource = {"name": "Joe Bloggs", "age": "", "from": "Royaume-Uni"} 

Nous utilisons l'aide conditionnelle de cette façon. Comme la valeur d'âge n'est pas présente, nous n'afficherons pas la ligne indiquant que I'm {{age}}, .

 {{#if age}} Je suis {{age}}, {{/ if}} 

Dans les navigateurs, la ligne ci-dessus sera rendue.

En outre, Handlebars accordera également les données vides si la valeur est explicitement spécifiée avec: undefined ou false .

Boucle

Handlebars prend également en charge Loop. Comme dans l'autre langage de programmation, il est utilisé pour répéter une série d'objets. À ce stade, nous n'avons qu'un objet contenant trois lignes de données. Prolongeons notre exemple avec deux autres objets, comme ça.

 var data = [{"name": "Joe Bloggs", "âge": "19", "de": "Royaume-Uni"}, {"name": "Jane Doe", "age": "21", "from": "United States"}, {"name": "John Doe", "age": "20", "from": "Nations Unies"}]; 

Comme nous avons maintenant plus d'un objet. Notre modèle actuel ne fonctionnera plus pour rendre ces données dans le modèle. Dans ce cas, nous devons utiliser Handlebars Loop, envelopper notre template dans {{#each}} ... {{/each}} . Nous pouvons également changer le modèle si nécessaire.

Dans cet exemple, nous afficherons ces données dans une liste.

Voici le résultat que nous verrons dans les navigateurs.

Exemple

Maintenant implémentons ceci dans un exemple réel. Cette fois nous voulons afficher un profil de Forrst, un hub pour les concepteurs et les développeurs. Forrst fournit une méthode simple pour récupérer leurs données. Dans notre cas, nous pouvons utiliser https://forrst.com/api/v2/users/info?username={username} pour récupérer un profil utilisateur. Nous obtiendrons quelque chose de similaire à ces données ci-dessous.

Note: les données réelles sont vraiment longues. Je dois donc en enlever quelques-unes pour les raccourcir.

 var forrstProfile = {"id": 24606, "nom d'utilisateur": "jimmyliu", "nom": "Jimmy Liu", "url": "http: \ / \ / forrst.com \ / gens \ / jimmyliu", " aime ":" 11 ", " suiveurs ":" 10 ", " suivant ":" 2 ", " photos ": {" medium_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ / 3151a9294608c3143551aa265f00bf71 .jpg? s = 75 & d = https: \ / \ / forrst.com \ / assets \ / images \ /default_75.jpg ", " small_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ / 3151a9294608c3143551aa265f00bf71.jpg? S = 45 & d = https: \ / \ / forrst.com \ / assets \ / images \ /default_45.jpg ", " thumb_url ":" https: \ / \ / secure.gravatar.com \ / avatar \ /3151a9294608c3143551aa265f00bf71.jpg?s=25&d=https:\/\/forrst.com\/assets\/images\/default_25.jpg "}, " bio ":" 
Un concepteur graphique et web basé à Cupertino, en Californie. Suivez-moi sur Twitter <\ / a> @jimmyliu <\ / a> <\ / p> \ n ", " is_a ":" développeur et designer ", }; 

Nous allons mettre ces données dans ce modèle.

Compilons-les ensemble, comme ça.

 var template = $ ('# forrst-profile-template'). html (); var compile = Handlebars.compile (template); var résultat = compile (forrstProfile); $ ('# forrst'). html (résultat); 

Avec quelques lignes de CSS, nous pouvons obtenir un meilleur résultat.

Vous pouvez télécharger la source et voir la démo à partir de ces liens.

• Voir la démo
• Source de téléchargement

Pensée finale

J'ai précédemment utilisé jQuery pour la création de modèles. Il pense que je le faisais mal, car mes codes se révèlent comme un gâchis. Lorsque nous avons un gros morceau de données, il est de loin préférable d'utiliser les Handlebars pour les modéliser et les afficher. Donc j'espère que ce sera une bonne référence pour commencer avec Handlebars.

5 Frameworks AngularJS pour une mise en route rapide des applications

Maintenant que vous connaissez bien les bases, il est temps de commencer à construire votre propre application web avec AngularJS . AngularJS a fait de la construction d'une application Javascript plus intuitive en utilisant ce qu'on appelle des directives, qui fonctionne de pair avec vos balises HTML.

(Conseils techniques et de conception)

8 types de titres de courrier électronique qui sont souvent ignorés

Quand un e-mail apparaît dans votre boîte de réception, que faites-vous habituellement avec lui? L'ouvrez-vous, l'ignorez-vous ou le tirez-vous directement dans la poubelle «Trash»? Cela dépend, n'est-ce pas?Cela dépend de ce qui est écrit dans la ligne d'objet .Vous voyez, la ligne d'objet vous indique, en un coup d'œil, si le message de l'expéditeur - ou, plus précisément, le but de l'expéditeur - vaut votre attention. En tant qu&

(Conseils techniques et de conception)