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!
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");
}
Check out this Stack Overflow Question, there are plenty of examples here EDIT: possibly outdated Recommended JavaScript HTML template library for JQuery?
Also, here is a more recent article on using external template files: http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/
I don't know if this is going to help if you are not using .NET. But I have the same problem and I wrote some code to do just that:
This thing basically just goes to a path and copy and paste all html files and attached the script type="text/x-jquery-tmpl" part on it.
If you need this to be even more automatic, here's some other code that appends the templates to the body of an html/aspx file:
I don't like the external templates method because of the amount of HTTP request needed. Ideally, want it to be downloaded once on the page and I can forget about the templates. If you are using Asp.net, you can put this in the MasterPage :)
Hope it helped
Chi
