jQuery templates - where should I put them?

Question

At the moment I have a single html page that has 4 templates in it and will have many more. Is it possible to put the templates in different files and "import" them in? Can I define them in a .js file?

I'm using jQquery template plugin: http://api.jquery.com/category/plugins/templates/

My code looks like the examples!

Answer 1

I mostly agree with this answer's spin: Where to keep html templates? You're already doing the right thing, because of the KISS principle.

Depending on how many templates you'll end up with (you mentioned "many more"), you may want to separate them from your main page. There are a couple reasons for this.

One reason would again be the KISS principle. Too many templates could make your source code difficult to navigate. Your editor or IDE might have you covered on this already. If not, this may be a good reason to put your templates into separate files.

The other reason would be for performance. If you serve the HTML file by itself, without the templates, your page will arrive at the client and begin rendering much sooner. You can also allow the client to cache some templates and only load new ones when they change. This will make future visits to your site initialize much faster.

If performance is especially important, you might consider a mixture of the two approaches. You would include the essential templates, the ones that assemble the basic structure of your page, in the main HTML page. Then, the optional templates can be fetched after the page loads and/or right before they're needed. To include the essential templates, you could use server-side templating.

Regarding your original question, as to where to store them, I say that you should put them wherever makes sense to you. Then, see Dave Ward's article on using external templates with jQuery templates for info on how build and fetch your templates. Here's the essential snippet of code:

// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {

  // Use that stringified template with $.tmpl() and 
  //  inject the rendered result into the body.
  $.tmpl(template, person).appendTo('body');
});

Then, see An Introduction to jQuery Templates, by Stephen Walther and jump to the section titled "Remote Templates". He has an example there which fetches and compiles the template only once, but makes it possible to render multiple times. Here are the essential snippets:

// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {

    // Compile and cache the template
    $.template("productTemplate", productTemplate);

    // Render the products
    renderProducts(0);
});

function renderProducts() {
    // Get page of products
    var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);

    // Used cached productTemplate to render products
    $.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}