Geek Answers Handbook

Using external composite jQuery templates

I wanted to try jQuery templates after I was inspired by these two blogs.

Well, that doesn't quite work for me. If I have the template code on the page itself, it works fine, but downloading remotely does not work for me. It seems the template is being restored in order. what's wrong here?

External template:

<script id="contactsTemplate" type="text/x-jquery-tmpl"> <table class="contacts"> <thead><tr><td class="ui-helper-hidden">Id</td><td>Name</td><td>City</td><td>State</td></tr></thead> <tbody> {{each contact}} {{tmpl($value) '#contactTemplate'}} {{/each}} </tbody> </table> </script> <script id="contactTemplate" type="text/x-jquery-tmpl"> <tr><td class="ui-helper-hidden">${id}</td><td>${name}</td><td>${city}</td><td>${state}</td></tr> </script>

On my page, I use this code to extract and load a template:

 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"); }); });

Update:

A new blog post on Encosia explains this question and answer ...

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

+4
source share
2 answers

This simple remote loading technology will not work with composite templates, since the loaded line is not a valid template. You can make it work by changing the click handler as follows:

 $("#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"); }); });
+3
source

You can compile the template string as a "named template" like this link: fooobar.com/questions/233249 / ...

0
source

More articles:


All Articles