J'ajouterai la dessus que le couple JQuery/JSON propose un moteur de template assez efficace pour le rendu (même s'il est encore en mode bêta pour le moment).
J'ai une petite démo en développement ici.
C'est une simple liste (à gauche) avec des dépendances (à droite) qui apparaissent quand on clique sur une ligne de la table principale.
Au dessus de la table de gauche se trouve une zone de saisie pour filtrer.
Dans cette démo, la liste de droite est construite avec ces quelques instructions (je schématise, le code actuel est plus complexe pour ajouter des évènements et travailler sur l'interface)
L'objet que je reçois ressemble à ça.
Il est structuré de manière à renvoyer un code de retour et une description de l'éventuelle erreur
En cas d'erreur, c'est quelque chose de ce genre
Il utilise une notation définie ici
Le code qui permet d'afficher les erreurs fonctionne sur le même principe
Et voici le contenu de errorbox.htm
Si ça vous intéresse, n'hésitez pas à jeter un œil sur les diverses sources de l'exemple que j'ai linkées plus haut.
[Edit]
J'ai modifié le code sur le site de manière à mettre les templates en cache au premier chargement.
Ça évite des requêtes inutiles vers le serveur à chaque actualisation.
J'ai une petite démo en développement ici.
C'est une simple liste (à gauche) avec des dépendances (à droite) qui apparaissent quand on clique sur une ligne de la table principale.
Au dessus de la table de gauche se trouve une zone de saisie pour filtrer.
Dans cette démo, la liste de droite est construite avec ces quelques instructions (je schématise, le code actuel est plus complexe pour ajouter des évènements et travailler sur l'interface)
//Appel Ajax pour récupérer la liste au format JSON
$.get('../data/rpglist.php5?search='+$('#rpg_search').attr('value'), function(d) {
//Parse du JSON
var RpgList = jQuery.parseJSON( d );
//Chargement du fichier de Template en asynchrone
$.get('../template/rpglist.htm', function(template) {
//Check les éventuelles erreurs
if(!CheckErrors(RpgList)){
// Le fichier de template est chargé, affichage des infos
$.tmpl(template, RpgList['return'] ).appendTo('#RpgList');
}
});
});
L'objet que je reçois ressemble à ça.
Il est structuré de manière à renvoyer un code de retour et une description de l'éventuelle erreur
{
"return": {
"value": 0,
"rpgs": [
{
"lastid": 0,
"rows": 3,
"rpg": [
{
"id": "177",
"name": "In Nomine Satanis / Magna Veritas",
"acc": "14"
},
{
"id": "299",
"name": "Infinite Domains",
"acc": "1"
},
{
"id": "292",
"name": "IronClaw",
"acc": "1"
}
]
}
]
}
};
En cas d'erreur, c'est quelque chose de ce genre
{
"return": {
"value": -1,
"logcat": [
{
"cat": "Error",
"logtag": [
{
"tag": "Rpg",
"logrow": [
{
"rowid": 0,
"evtid": 5,
"evtat": "10:04:01.586404",
"logtxt": [
{
"#text": "Vérifiez le filtre"
}
],
"logdet": [
{
"#text": "Aucun Résultat"
}
]
}
]
}
]
}
]
}
}Il utilise une notation définie ici
<div class="tablespace">
<div class="head-row">
<div class="head-name"></div>
<div class="head-acc"></div>
</div>
{{each(i,rpg) rpgs[0].rpg}}
<div class="rpg-row" id="rpg_${rpg.id}"><div>${rpg.name}</div><div>${rpg.acc}</div></div>
{{/each}}
</div>
Le code qui permet d'afficher les erreurs fonctionne sur le même principe
function CheckErrors(oVal){
if(oVal['return']['value']==-1){
//Erreur détectée dans la structure de retour
// Récupération du template pour le message d'erreur
$.get('../template/errorbox.htm', function(template) {
// Application du template et injection du résultat
$.tmpl(template, oVal['return'] ).appendTo('body');
$( "#dialog" ).dialog({
resizable:false,
modal:true,
buttons: {
"Ok": function() {
$(this).remove();
}
}
});
});
return true;
} else {
return false;
}
}
Et voici le contenu de errorbox.htm
<div id="dialog" title="Message" >
{{each(i,logcat) logcat}}
{{if logcat.cat=='Error'}}
{{each(i,logtag) logcat.logtag}}
{{each(i,logrow) logtag.logrow}}
<li>
${logrow.logtxt[0]['#text']} : ${logrow.logdet[0]['#text']}
</li>
{{/each}}
{{/each}}
{{/if}}
{{/each}}
</div>
Si ça vous intéresse, n'hésitez pas à jeter un œil sur les diverses sources de l'exemple que j'ai linkées plus haut.
[Edit]
J'ai modifié le code sur le site de manière à mettre les templates en cache au premier chargement.
Ça évite des requêtes inutiles vers le serveur à chaque actualisation.
Quand on te dit qu'un projet est terminé à 90%, prépare toi pour les 90% suivant
Ninety-Ninety Rule
"Une guerre de religions, c'est quand deux peuples s'entretuent pour savoir qui a le meilleur ami imaginaire"
Vu sur IRC
Ninety-Ninety Rule
"Une guerre de religions, c'est quand deux peuples s'entretuent pour savoir qui a le meilleur ami imaginaire"
Vu sur IRC