jQuery: Templates. Must be contained in script block?

Question

As a JS developer, I always keep my design layer separate from my business layer. Meaning, HTML is always alone, CSS and JavaScript files are external and included.

Now, in the case of jQuery Templates, a declared template must apparently live within a script block of the page. How in the world are you supposed to keep all of your business separated? I don't want messy HTML. I want clean HTML that never needs to be touched because it's been designed that way...

Are there solid, proven methods for doing this?

Answer 1

You can call $.templ(yourTemplateString, data) if you want. That returns the built-up elements which you can then stick in your document with "append" or whatever.

I agree with you that doing templates as <script> tags is not a super cool idea for everyone.

Answer 2

There is a sacrifice, but what looks more maintainable and clean:

Original:

for(var i=0; i<client.name.length; i++) {
    clRec += "<li><a href='clients/"+client.id[i]+"'>" + client.name[i] + "</a></li>";
}

Templates

<script id="clientTemplate" type="text/html">
    <li><a href="clients/${id}">${name}</a></li>
</script>

Code from http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

Answer 3

You can use a different $.tmpl() syntax and $.ajax() to use jQuery Templates definitions stored in external files.

Answer 4

I suppose that if you're looking to templatize your application, try out the jQuery Template. But I've come to realize that, like many frameworks, ends up complicating the code even further.