Le moteur de rendu Handlebars

1. Les données répétitives

Pour ce premier exemple, nous allons utiliser des données répétitives au format JSON, en reprenant l’exemple de la liste des chiens du chapitre précédent. Ces données sont placées en interne, dans un élément <script> :

<script> 
    var chiensJSON = {"chiens":[ 
        {"Nom":"Raja","Couleur":"Brun","Race":"Labrador"}, 
        {"Nom":"Lord","Couleur":"Beige","Race":"Beagle"}, 
        {"Nom":"Yuky","Couleur":"Noir","Race":"Caniche"} 
    ]} ; 
</script>
 

2. Le template

Pour concevoir nos templates, nous allons à nouveau utiliser l’élément HTML <script>, avec un identifiant et un type spécifique à Handlebars.

<script id="template" type="text/x-handlebars-template">
 

Comme précédemment pour créer les templates, c’est une syntaxe à double accolades qu’il faut utiliser.

Pour effectuer des boucles, nous allons utiliser une syntaxe propre...

1. Concevoir les templates

Comme pour Mustache, avec Handlebars nous allons pouvoir décomposer des templates complexes en plusieurs blocs fonctionnels, des partials dans la terminologie anglaise de Handlebars. Mais Handlebars nous offre plus de facilités que Mustache.

Nous allons reprendre l’exemple précédent en retirant du template principal l’affichage concernant la race du chien, pour le placer dans un bloc séparé.

Voici le template principal initial :

<script id="template" type="text/x-handlebars-template"> 
    {{#each chiens}} 
        <h2>Nom du chien : {{Nom}}.</h2> 
        <p>Couleur du chien : {{Couleur}}.</p> 
        <p>Race du chien : {{Race}}.</p> 
    {{/each}} 
</script>
 

C’est donc la ligne <p>Race du chien : {{Race}}.</p> que nous allons retirer.

Nous créons un deuxième template pour ce bloc séparé :

<script id="race" type="text/x-handlebars-template"> 
    <p><em>Race du chien</em> : <strong>{{Race}}</strong>.</p> 
</script>
 

Cet élément <script> possède son identifiant unique...

1. La répétition des données

Nous allons reprendre l’exemple précédent en modifiant quelque peu sa structure afin de pouvoir mettre en place le premier helper.

Voici le template principal :

<script id="template" type="text/x-handlebars-template"> 
    {{#each chiens}} 
        <h2>Nom du chien : {{Nom}}.</h2> 
        <p>Couleur du chien : {{Couleur}}.</p> 
        {{> raceChien}} 
    {{/each}} 
</script>
 

Nous souhaitons mettre en gras les valeurs de chaque élément du tableau : le Nom (dans un élément <p> et non plus dans un élément <h2> comme cela était le cas initialement) et la Couleur. Pour mettre en place cela, nous pourrions insérer un élément HTML <strong> pour chacune de ces balises Handlebars :

<script id="template" type="text/x-handlebars-template"> 
    {{#each chiens}} 
        <p>Nom du chien : <strong>{{Nom}}</strong>.</p> 
        <p>Couleur du chien : <strong>{{Couleur}}</strong>.</p> 
        {{> raceChien}} 
    {{/each}} 
</script>
 

Vous voyez que cela est très répétitif. Et si la mise en forme est plus complexe, le code deviendrait très verbeux.

Il en est de même pour le bloc initial :

<script id="race" type="text/x-handlebars-template"> 
    <p><em>Race du chien</em> : <strong>{{Race}}</strong>.</p> ...

1. La concaténation des données

Dans ce deuxième exemple de helper, nous voulons concaténer deux entrées des données JSON. Dans ces données, nous ajoutons une nouvelle entrée nommée Proprietaire :

var chiensJSON = {"chiens":[ 
    {"Nom":"Raja","Couleur":"Brun","Race":"Labrador", 
         "Proprietaire": {"NomPro":"Durand","PrenomPro":"Paul"} 
    }, 
    {"Nom":"Lord","Couleur":"Beige","Race":"Beagle", 
         "Proprietaire": {"NomPro":"Leconte","PrenomPro":"Valérie"} 
    }, 
    {"Nom":"Yuky","Couleur":"Noir","Race":"Caniche", 
         "Proprietaire": {"NomPro":"Tralent","PrenomPro":"Julie"} 
    } 
]} ;
 

Cette nouvelle entrée est composée de deux couples nom/valeur, NomPro et PrenomPro.

2. Définir le helper

C’est bien sûr dans le script principal que nous allons définir ce helper :

Handlebars.registerHelper('nomComplet',function(proprio){ 
    return proprio.PrenomPro + ' ' + proprio.NomPro ; 
})
 

Le helper est nommé nomComplet et il concatène les valeurs de PrenomPro...

1. Utiliser une condition de test

Handlebars nous permet de faire des tests conditionnels avec le mot-clé if. Des données ne seront pas affichées, si une donnée spécifiée n’est pas définie, si le test if sur la donnée testée renvoie false, undefined, null, "", 0, ou [].

Dans cet exemple, nous allons modifier nos données sources en supprimant l’entrée Nom pour le deuxième chien :

var chiensJSON = {"chiens":[ 
    {"Nom":"Raja","Couleur":"Brun","Race":"Labrador"}, 
    {"Couleur":"Beige","Race":"Beagle"}, 
    {"Nom":"Yuky","Couleur":"Noir","Race":"Caniche"} 
]} ;
 

Voici l’affichage obtenu sans utiliser le test if :

Il est donc logique de se dire que si ce chien n’a pas de nom, il ne doit pas être affiché.

Nous allons donc modifier le template principal en introduisant la logique if.

<script id="template" type="text/x-handlebars-template"> 
    {{#each chiens}} 
        {{#if Nom}} 
            <h2>Nom du chien...

1. Déterminer le contexte

Dans cet exemple, nous allons aborder le helper with, qui permet d’afficher des données d’un contexte spécifié. Si nous reprenons nos données sources avec l’ajout des propriétaires, Proprietaire, nous pouvons voir que ceux-ci sont insérés en tant qu’objets dans le tableau de données chiens.

var chiensJSON = {"chiens":[ 
    {"Nom":"Raja","Couleur":"Brun","Race":"Labrador", 
         "Proprietaire": {"NomPro":"Durand","PrenomPro":"Paul"} 
    }, 
    {"Nom":"Lord","Couleur":"Beige","Race":"Beagle", 
         "Proprietaire": {"NomPro":"Leconte","PrenomPro":"Valérie"} 
    }, 
    {"Nom":"Yuky","Couleur":"Noir","Race":"Caniche", 
         "Proprietaire": {"NomPro":"Tralent","PrenomPro":"Julie"} 
    } 
]} ;
 

Si nous souhaitons afficher les données NomPro et PrenomPro avec cette syntaxe :

<script id="template" type="text/x-handlebars-template"> 
    {{#each chiens}} 
        <p>Nom du chien : {{{gras Nom}}}.</p> 
        <p>Couleur du chien : {{{gras Couleur}}}.</p> 
        {{>...