Rendre les modèles JQuery réutilisables

Question

Je souhaite créer un (des) modèle (s) jQuery qui sera utilisé dans le projet. Je préférerais mettre les modèles dans un ou plusieurs fichiers séparés et les compiler au démarrage du projet en utilisant la fonction template.

Je ne veux pas avoir les modèles dans le balisage, dans les balises de script. Est-ce possible et comment le ferais-je?

Answer 1

Comme RoccoC5 suggéré, vous pouvez définir un petit plugin qui va chercher votre modèle à distance, puis ajoutez son contenu dans une balise de script à la tête:

(function ($) { 
    $.loadTmpl = function (url, name) { 
     return $.get(url).success(function (content){ 
      $("head").append($('<script/>', { 
       id: name, 
       type: 'text/template' 
      }).html(content)); 
     }); 
    }; 
}(jQuery)); 

et l'utiliser avec:

$.loadTmpl('hi.html', 'hi').done(function() { 
    $('#hi').tmpl({name: 'Tom'}).appendTo('body'); 
}); 

ou:

$.when(
    $.loadTmpl('foo.html', 'foo'), 
    $.loadTmpl('bar.html', 'bar'), 
    ... 
).done(function() { 
    // All your templates are now loaded 
}); 

Hope this aide.

Answer 2

Les modèles sont simplement utilisés comme des chaînes, vous n'avez donc même pas besoin d'injecter des scripts. Passez simplement la chaîne directement à jQuery.template. Donc, en ajustant ce que @abernier a suggéré, vous pouvez faire quelque chose comme suivre. Je fais l'hypothèse que vous nommez les fichiers le même nom que le nom de modèle que vous voulez utiliser et vous les stockez dans TMPLPATH.

$.loadTmpl = function (name) { 
     return $.get(TMPLPATH + name + ".tmpl").success(function (content){ 
      $.template(name, content); 
     }); 
    };