Sommaire

Concevoir un template avec des données répétitives

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 à Handlebars. Dans notre exemple de données, c’est l’élément chiens qui doit être répété ...