Jquery Templates

Question

I am using Jquery templates to display incoming JSON data I would like to load the template in a cacheable external file. How do I do this?

UPDATE
http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/
very close to the solution I ended up with, I just used a iframe instead;

Veger · Accepted Answer · 2014-11-09T20:16:23.757

3

These 2 pages seem to give the answer quite nicely:

edited Nov 09 '14 at 20:16

answered Nov 14 '10 at 13:24

Veger

37,240
11
105
116

1

@SvenHecht Thanks for noticing, I have updated the links to their new domain – Veger Jan 11 '13 at 09:49
Links are dead again (still?) – IARI Nov 09 '14 at 12:09
Dead again, I linked to the web archive now (I could not find a location for the blog again...) Thanks for notifying! – Veger Nov 09 '14 at 20:17

score 2 · Answer 2 · answered Nov 14 '10 at 17:04

There seem to be several techniques to implement this each with its advantages/disadvantages.

1)Use a inline script block. This would bring the template blocks with each page load. If parent page is non-cacheable, it could get heavy with multiple templates

2)Access templates via a global variable object in an external javascript file. This is cacheable but template strings become hard to decipher

3)Template strings come as a part of JSON response. This begs the question, why not server side templating?

4)Use a static iframe and compile the templates on iframe load - this is cacheable, templates are readable/editable, same-origin policy could be a problem if static elements are placed on another domain

I finally opted for the iframe approach, but am too inexperienced to be aware of all pitfalls.

Thanks

score 2 · Answer 3 · edited Oct 06 '11 at 23:21

I use ajax calls against server side resource, aspx in this example

$.ajax({ 
   url: "myprog.aspx", 
   data: { whichTemplate: "template I'm Looking for" }, 
   success: function(result) { 
                 // result is the text string containing either a single template or a delimated list of templates 
                 $.template('templatename', result); 
            } , 
   dataType: "text"
});

score 1 · Answer 4 · answered Nov 14 '10 at 16:48

maybe this code can help:

<script id="entry_show_template" defer type="text/html">
  <div class="entry">
    Age: <span class="age"></span> <a class="name" href="#"></a>
  </div>
</script>

Maybe you could use this code also with src attribute, scripts are accessible so:

$('#entry_show_template')

score 0 · Answer 5 · edited May 23 '17 at 10:24

0

See my answer for jQuery templates - where should I put them?

In addition to the article from Dave Ward that you mentioned in your question, it references some additional tricks from An Introduction to jQuery Templates, by Stephen Walther. In particular, it covers how to fetch the template once and cache a compiled version of it.

edited May 23 '17 at 10:24

Community

1
1

answered Sep 02 '11 at 17:27

justis

504
4
6

Jquery Templates

5 Answers5