CODEWITHSUNDEEP
jquerytemplatesjquery-templates
nocksock
nocksock

Reputation: 5527

load jQuery-Templates from external file?

I just started using jQuery's template engine. Which looks quite nice so far. Yet i wonder if it's possible to load templates from an external file somehow. Imagine having loads of templates. This would mess up the html-code and is also not cacheable and has to be downloaded on every request.

I was hoping there is a way to define them all in an external file and then load them and store the compiled templates into localStorage.

Does anyone have an idea how to load them from an external file?

Upvotes: 24

Views: 24043

Answers (3)

Steven Hunt
Steven Hunt

Reputation: 2321

I recently wrote a javascript library to assist with this:

https://www.github.com/stevenmhunt/tmpl.loader

You can add jsRender or any other kind of template files using the <link> tag and they automatically register.

Upvotes: 0

moledet
moledet

Reputation: 939

I wrote litle lib as jQuery plugin for ajax rendering html on appear block with indexDB caching in browser jQuery HTML Template Loader

Upvotes: 1

Floyd
Floyd

Reputation: 1918

you can load this template with ajax.

<script>
  var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
    { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
  ];

  $.get("templates/movieTemplate.html", function(data, textStatus, XMLHttpRequest){
    var markup = data; //"<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"

    /* Compile markup string as a named template */
    $.template( "movieTemplate", markup );

    /* Render the named template */
    $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
  });
</script>

You can add now the localstorage logic or an array for the loaded templates if you want to load any template only once.

Upvotes: 15

Related Questions