Lors d'un développement de type AJAX, on se trouve rapidement confronté à la problématique suivante :
- Je récupère des données au format JSON
- Je les affiche en HTML
Question toute bête à priori : mais comment faire cela ?
Old School
On parcourt la structure Javascript et on produit le HTML avec des fonctions comme document.write ou element.appendChild
Exemple :
var data = [ "Meuse", "Vosges", "Moselle", "Meurthe & Moselle" ];
document.write('<ul>');
for(i = 0; i < data.length; i++) {
document.write('<li>'+data[i]+'</li>');
}
document.write('</ul>');
ou
<ol id="list"> </ol>
ol = document.getElementById("list");
for(i = 0; i < data.length; i++) {
li = document.createElement("li");
li_text = document.createTextNode(data[i]);
li.appendChild(li_text);
ol.appendChild(li);
}
Temps modernes : les frameworks
Bien sûr, maintenant, plus personne n'écrit du Javascript sans utiliser des frameworks comme Prototype ou JQuery.
Cependant, on écrira la même chose qu'auparavant de manière plus simple :
Avec Prototype :
<ol id="list3"> </ol>
data.each(function(item) {
$('list3').insert(new Element('li').update(item));
});
Avec JQuery :
<ol id="list2"> </ol>
jQuery.each(data, function(i,item){
jQuery("#list2").append(jQuery("<li>"+item+"</li>"));
});
On remarque ici la présence presque obligatoire d'une balise html d'ancrage. (ici, la balise <ol id="listX"> )
Le futur : les templates
A l'usage, les méthodes précédentes posent évidement le problème de la séparation du fond et de la forme : un problème bien connu en PHP et plus généralement pour la conception de site web traditionnel. (cf l'article Wikipedia sur les templates)
Alors nous voilà revenu au temps du choix d'un moteur de template !
Pour faire ma sélection dans cette liste, il y a plusieurs critères :
- une preuve de vie (évolution des versions par exemple, activité sur le site)
- une (bonne) documentation à jour
- un fonctionnement multi- browser
- une capacité à traiter des structures de données complexes
J'ai choisi de comparer :
- JSrepeter
- jstemplate
- Pure
Pour chacun d'entre eux, j'essayerai de traiter le tableau de données suivant :
var data = {
"items":[
{
"titre":"titre 1",
"img":"http:\/\/localhost\/images\/01.jpg",
"list1":[
"row 1",
"row 2"
],
"list2":[
{
"nom":"nom 1"
},{
"nom":"nom 2"
}
]
},
{
"titre":"titre 2",
"img":"http:\/\/localhost\/images\/02.jpg",
"list1":[
"row A",
"row B"
],
"list2":[
{
"nom":"nom A"
},{
"nom":"nom B"
}
]
}
]
}
Compiler un template
Avec jsrepeter :
$('#test').fillTemplate(data);
Avec jstemplate :
var input = new JsEvalContext(data);
var output = document.getElementById('test');
jstProcess(input, output);
Avec pure :
$('#test').autoRender(data);
Afficher une valeur dans une balise ou l'attribut d'une balise
Avec jsrepeter :
<ol id="test">
<li context='items' >
<img src="${img}" />
<span>${titre}</span>
</li>
</ol>
Avec jstemplate :
<ol id="test">
<li jsselect="items" >
<img jsselect="img" jsvalues="src:$this" />
<span jscontent="titre">xxx</span>
</li>
</ol>
Avec pure :
<ol id="test">
<li class="items">
<img class="img@src" src="xxx" />
<span class="titre">XXX</span>
</li>
</ol>
Traiter les sous listes avec un index numérique
Avec jsrepeter :
Impossible à faire ?
En tout cas pour le moment, je n'ai pas réussi.
Avec jstemplate :
<ol id="test">
<li context='items' >
<ol>
<li jsselect="list1" jscontent="$this">XXX</li>
</ol>
</li>
</ol>
Avec pure :
En théorie (cf .démo) cela semble possible, mais la syntaxe est loin d'être triviale, j'abandonne pour le moment.
Traiter les sous listes avec un index alphanumérique
Avec jsrepeter :
<ol id="test">
<li context='items' >
<ol>
<li context='list2'>${nom}</li>
</ol>
</li>
</ol>
Avec jstemplate :
<ol id="test">
<li context='items' >
<ol>
<li jsselect="list2" jscontent="nom">XXX</li>
</ol>
</li>
</ol>
Avec pure :
En théorie (cf .démo) cela semble possible, mais la syntaxe est loin d'être triviale, j'abandonne pour le moment.
Conclusion
A ce jour, pour moi, le meilleur système de template est jstemplate, car il est capable de traiter n'importe quel format de données tout en restant très simple à l'usage.
Malgré une apparente facilité, Pure est compliqué à utiliser. De plus, l'usage de l'attribut class prête à confusion et rend le template au final moins lisible.
Jsreapter possède la syntaxe la plus simple et il est surement le plus facile à appréhender. Malheureusement, il semble incapable de traiter les index numériques...
