Sommaire

Afficher des données internes et un template séparé

Dans les deux exemples précédents, nous avons créé le template directement dans une variable. Cela peut être utilisé pour des projets ayant un design simple. Mais dès lors que le design est plus complexe, cette solution n’est pas très pratique.

Dans cet exemple, nous allons reprendre les données répétitives, nous allons "sortir" le template de la variable et le créer dans un élément <script> pour que cet élément ne soit pas affiché dans la fenêtre du navigateur, comme le serait un élément <div> par exemple.

Voici la structure de la page :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <div id="conteneur"></div> 
        <script id="template" type="x-tmpl-mustache"> 
            {{#chiens}} 
                <h2>Nom du chien : {{Nom}}.</h2> 
                <p>Couleur du chien : {{Couleur}}.</p> 
                <p>Race ...