Sommaire

Décomposer des templates

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 id="race". Son contenu reprend la syntaxe du template initial, avec une mise en forme HTML supplémentaire.

Il nous faut maintenant faire appel à ...