If you want to keep your templates in external files, you can load the template in like so:
$.get('/js/templates/filename.html', function(template) {
$.tmpl(template, data).appendTo('#whatever');
});
A couple of benefits of this method:
- Organizing your templates into their own files is tidy.
- Your syntax highlighter will be happier, since you're not writing HTML between two
<script>
tags.
I used to do this, but executing your code as a callback gets pretty hairy when you need to load several inter-dependent templates. You end up with a bunch of nested callbacks.
I think it's best to compile js templates into pure Javascript and load them with
<script>
tags.