Sommaire

Utiliser un helper conditionnel

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 :

images/C08-010.png

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 : {{Nom}}.</h2> 
            <p>Couleur du chien : {{Couleur}}.</p> 
            {{> raceChien}}  ...