Sommaire

Décomposer le template en blocs

1. Les objectifs

Dans l’exemple précédent, nous avons placé le template dans un élément <script> séparé, afin de mieux séparer les composants de la structure de la page. Mais nous pouvons aller plus loin encore, en décomposant le template en blocs fonctionnels. Dans la terminologie de Mustache, les blocs de template séparés du template principal s’appellent des partials.

Il se peut que votre template soit constitué de nombreuses parties fonctionnelles distinctes. Dans ce cas, il peut vite devenir confus et verbeux. Il est alors préférable de le décomposer en plusieurs blocs séparés, chaque bloc s’occupant d’une fonctionnalité précise.

Dans notre exemple, nous allons séparer la partie affichant la race des chiens dans un bloc distinct. Nous aurons ainsi deux templates, le premier gérant l’affichage du nom et de la couleur du chien, le deuxième affichant la race du chien. Bien sûr, cet exemple reste simple, à vous d’adapter cette démarche à vos projets plus complexes.

2. Les templates

Dans le template initial, nous voulons sortir la partie gérant la race des chiens.

Voici le template initial :

<script id="template" type="x-tmpl-mustache"> 
    {{#chiens}} 
        <h2>Nom du chien : {{Nom}}.</h2> 
        <p>Couleur ...