load jQuery-Templates from external file?

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.