jTemplate (http://jtemplates.tpython.com) est un plugin pour jQuery (http://jquery.com/). Il ajoute la merveilleuse fonctionnalité qu'est le templating à la librairie jQuery. J'avais longtemps souhaiter cela ! C'est chose faite à présent et c'est à la fois extrêmement pratique et puissant.

Les développeurs, par soucis de relecture et maintenance, cherchent à dissocier au maximum le contenu de la partie code. Appliqué à PHP, Smarty (http://www.smarty.net/) fût une véritable révolution lors de sa sortie en 2003.  Aujourd'hui des dixaines de milliers de développeurs l'utilisent quotidiennement dans des projets de grande envergure.

Si vous êtes comme moi un familier de la syntaxe Smarty, vous ne serez pas dépaysé par jTemplates.

La mise en oeuvre est ultra simple :

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery-jtemplate.js"></script>

La première chose à faire est d'ajouter un conteneur qui recevra le résultats de la "transformation":

   <p id="my_list"></p>

Une fois ceci fait il faut créer un element contenant un template :

      <textarea name="template" id="template">
      <![CDATA[
      {#template MAIN}
        <p>Pour rouler une {$T.title} vous aurez besoin des fournitures suivantes :</p>
        <ul>
         {#foreach $T.elements as record}
            <li>{$T.record.element} ({$T.record.quantite})</li>
         {#/for}
        </ul>
      {#/template MAIN}
      ]]></textarea>

Et définir nos données JSON de la même manière :

      <textarea name="item" id="item">
      {
         "title" : "Cigarette",
         "elements": [
         {"element": "tabac", "quantite":"un peu"},
         {"element": "feuille", "quantite":1},
         {"element": "filtre", "quantite":1},
         ]
      }</textarea>

Nous venons de mettre en place un combo formidable que nous allons activer avec les deux lignes de code suivantes (à affecter sur l'evenement onClick d'un element par exemple) :

      $('#my_list').setTemplateElement('template');
      var data = eval( '(' + $('#item').attr('value') + ')');
      $('#my_list').processTemplate(data);

Le seul truc à noter si  on ne travaille par directement avec des objets, c'est qu'il faut impérativement  évaluer  le JSON avant d'appliquer la transformation. Pour une raison mal définie, il faut wrapper la chaîne de caractères JSON dans des parenthèses afin que l'eval() fonctionne...

Vous pouvez aussi consulter cet exemple ainsi qu'un outil de benchmark sur le Workshop.

Pour ma part j'utilise les fonctions $.setTemplate() et $.setTemplateURL(). En effet, je ne trouve pas qu'il soit optimal d'avoir les templates dans des textarea cachés dans la page pour plusieurs raisons :

• Cela oblige l'utilisateur à télécharger tous les templates au chargement de la page.
• L'utilisateur peut éventuellement modifier le contenu des templates à l'aide de Firebug et cela peut poser problème si vous utilisez jTemplates pour générer des formulaires.
  

J'ai donc opté pour une solution plus adaptée à l'Ajax et au Web 2.0.

Quand un template doit être utilisé souvent sur une page, je le télécharge en utilisant la fonction $.get() de jQuery au chargement de la page et je le stocke dans une variable, il sera disponible tant que l'utilisateur n'aura pas besoin de changer de page.

Si le template est sensé être utilisé dans des cas plus rare je le télécharge uniquement "on demand". Biensur, rien n'empêche de dire à la fonction de téléchargement de mettre en cache le template au bout d'un certains nombre de téléchargements :D

Fonction de mise en cache d'un template au chargement de la page (jQuery) :

      var tpl_root = "/templates/jtpl/";
      var table_template = '';
       
      $(document).ready(function(){
         $.get(tpl_root + "table.html", function(data) {
            table_template = data;
         });
      });