Question

A common pattern for loading backbone templates is something like:

<script type='text/template' id='foo'>
    my template
</script>

----
var whatever = $('#foo').html();

I would like to include the script in an external file like so:

<script type='text/template' id='foo' src='myTemplate.tpl'></script>

But the html() of foo is now empty.

I watched the browser pull the template file down, but I am not sure if it is in the page dom or not. Is there a simple way to reference the content of the script in javascript, or did the browser simply ignore it and throw out the result?

Answer 1

I think to actually execute externally loaded script you have to do an eval() of the contents. You’re not adding it to the DOM really since it’s script, you’re adding it to the JS runtime. There might be other ways of doing it but eval() is generally considered a security hole since malicious code could be evaluated.

What I tend to do is generate template sections on the server so I know all my JS is there when the DOM is ready.