24
NOV

jquery-tmpl - le moteur de templates jQuery

Publié le 24/11/10 à 09h13 par Cethy

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 ;

jQuery Templates

 

utilisation

Obtenir le script

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

 

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.

Baraguiné par MaMouT le 24/11/10 à 09h27
MaMouT sur La Ferme du Web
Alors là, je reste perplexe : transfert de moins de données... on transmet tout et on fait le tri chez le client... mouais.
Perso, je préfère un système de template php qui offre des pages optimisées, moins lourdes pour le client... en gros, je prefère garder son processeur pour utiliser jQuery pour de l'ajax, des animations...
A tester mais par convaincu par l'idée.
Baraguiné par le 24/11/10 à 09h52
Je pense pas que ce soit la bonne façon de voir la chose MaMout.
Concernant l'affichage de ta page ou de "gros morceaux" de pages, tu gardes bien sur ton moteur de templates php.
En revanche cette solution est très intéressant dans le cadre d'un dev de composant jquery, qui va générer dynamiquement du html.

Par exemple tu veux générer un div, avec 2 span et 1 image à l'intérieur : au lieu de stocker la chaine dans une variable tu vas utiliser ce moteur et remplir les propriétés dynamiquement en jquery.
Baraguiné par MaMouT le 24/11/10 à 11h04
MaMouT sur La Ferme du Web
@Jean-François Cambot : effectivement, vu comme ça il y a un intérêt mais après, c'est une utilisation très spécifique et du coup, pour le dev d'un site il faudrait connaitre le code pour les moteurs de template en php et en jquery... et savoir où on a généré quoi.
Baraguiné par xpaes le 24/11/10 à 11h27
xpaes via Twitter
En tout cas, excellent article qui présente très bien les choses. Claire et concis.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web