jquery-tmpl - le moteur de templates jQuery

présentation

Les avantages de l'utilisation d'un moteur de templates en PHP (ou ASP, java, ..., ne soyons pas sectaire) ne sont plus à démontrer. Mais à quoi peut servir cette "couche d'abstraction" en javascript ?

• Plus de script compliqué pour la manipulation du DOM ;
• Transfert de moins voir pas de données entre serveur et client ;

utilisation

Obtenir le script

Première chose à faire : récupérer le script à cette adresse ou utiliser les CDN proposés :

• http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js
• http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js (version minimale)

Définition d'un bloc de template

<script id="template_1" type="text/x-jquery-tmpl">
  <!-- template ici -->
</script>

Ne pas oublier l'id du script (qui servira à l'appeler en tant que tpl) et le type "text/x-jquery-tmpl" que le navigateur n'interprètera pas.

tags

Voici une liste non-exhaustive des tags utilisables dans les templates jQuery :

${fieldNameOrExpression} : insère la variable ou le résultat de la fonction javascript fieldNameOrExpression

{{if}} ... {{else}} ... {{/if}} : if ... else classique (j'estime que tous les lecteurs ont au moins des notions de programmation)

{{if MainItems.length==0}}
    <tr>
        <td>No items selected</td>
    </tr>
{{else}}
    <tr>
        <td>Ordered items!</td>
    </tr>
{{/if}}

{{each}} : boucle sur un tableau

{{each(i,mi) MainItems}}
    <tr>
        <td>
            ${ mi.NumberOrdered } ordered 
            at $ ${ mi.Price} per item
        </td>
    </tr>
{{/each}}

{{tmpl}} : Insérer un autre template dans le template actuel

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}}
    <tr>
       <td>${ Director }</td>
    </tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl">
    <tr class="title">
        <td>${ Name }

Faire le rendu d'un template

var json = {
  'var1'  : 'toto',
  'var2'  : 'tata',
};

$('#template_1').tmpl(json).appendTo('#elementInHtml');

Selection du template via son id, application de la méthode .tmpl() avec en paramètre un objet json et enfin on l'ajoute en bas de l'élément elementInHtml.

Exemple complet

Déclaration du template :

<script id="listTemplate" type="text/x-jquery-tmpl"> 
{{if items.length==0}}
  <p>Aucun item</p>
{{else}}
  <ul>
  {{each(i,item) items}}
    <li>
      ${ item.text }
    </li>
  {{/each}}
  </ul>
{{/if}}
</script>

Et appel du template :

var liste = {
  'items' : {
    '0':{"text":"item 1"},
    '1':{"text":"item 2"},
    '2':{"text":"item 3"},
    '4':{"text":"item 4"}
  }
};
$('#listTemplate').tmpl(liste).appendTo('#target');

Conclusion

Les templates en javascript peuvent être d'une grande aide pour les applications à fort traffic ou lorsqu'on a des manipulations du DOM répétitives ;

Mais hélas l'accessibilité n'est absolument pas au rendez-vous (javascript obligatoire). Cette technique ne devrait donc être utilisé que dans les services qui ne peuvent déjà pas se passer du javascript.