Sommaire

Utiliser un helper pour une mise en forme répétitive

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. ...