Sommaire

Afficher des données internes simples

1. La structure de la page

Dans ce premier exemple, nous allons créer un template avec des données très simples. Nous allons avoir besoin de ces deux constituants principaux :

  • des données internes simples au format JSON,

  • un template au format Mustache.

Nous allons exécuter le rendu des données et les afficher dans un élément HTML de la page.

Voici le code de ce premier exemple :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <div id="conteneur"></div> 
        <script src="mustache.js"></script> 
        <script> 
            // Fournir les données internes en JSON 
            var chienJSON = {"Nom":"Raja","Couleur":"Brun","Race": 
"Labrador"} ; 
            // Définir le template 
            var leTemplate = "<h2>Nom du chien : {{Nom}}.</h2><p>Couleur du 
chien : {{Couleur}}.</p><p>Race du chien : {{Race}}.</p>" ; 
            // ...