使用外部复合jQuery模板

我想在受到这两篇博客post的启发后试用jQuery模板

• http://encosia.com/2010/11/10/composition-with-jquery-templates-why-and-how/
• http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

嗯，这对我来说不太合适。 如果我在页面上有模板代码，它可以正常工作，但远程加载对我不起作用。 看来模板正在被检索好。 这有什么不对？

外部模板：

  {{each contact}} {{tmpl($value) '#contactTemplate'}} {{/each}} 
 
Id
Name
City
State
 
 
   ${id}${name}${city}${state}  

在我的页面上，我使用此代码来检索和加载模板：

 var contacts = { contact: [ { id: 1, name: "John Green", city: "Orange Beach", state: "AL" }, { id: 2, name: "Sam Thompson", city: "Pensacola", state: "FL" }, { id: 3, name: "Mary Stein", city: "Mobile", state: "AL" } ] }; $("#ShowDataRemote").button().click(function() { $.get('templates/Contact.htm', function(template) { alert(template); $.tmpl(template, contacts).appendTo("body"); alert("async done"); }); }); 

---

更新：

关于Encosia的新博客文章解释了这个问题和答案……

http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/

Answer 1

这种简单的远程加载技术不适用于复合模板，因为您加载的字符串本身不是有效的模板。 您可以通过更改单击处理程序来使其正常工作：

 $("#ShowDataRemote").button().click(function() { $.get('templates/Contact.htm', function(template) { // Inject the template script blocks into the page. $('body').append(template); // Use those templates to render the data. $('#contactsTemplate').tmpl(contacts).appendTo("body"); }); }); 

Answer 2

您可以将模板字符串编译为“命名模板”，如下所示： https ： //stackoverflow.com/a/4366280/1274343