can I include a text/template script from a src?

Question

I was trying to create a basic app, using backbone, underscore, and Parse.

In my index.html, I tried including some scripts like this:

<script data-main="js/main" src="../bower_components/requirejs/require.js"></script> <script type="text/template" id="login-template" src="js/templates/login.js"> 

When I tried to do the following on my backbone part, it did not work.

template: _.template($('#login-template').html()); // ... render: function() {     this.$el.html(this.template()); } 

However, when I changed my script, and added it directly in the html document, it worked fine.

<script type="text/template" id="login-template">   <header id="header"></header>   <div class="login">     <form class="login-form">       <h2>Log In</h2>       <div class="error" style="display:none"></div>       <input type="text" id="login-username" placeholder="Username" />       <input type="password" id="login-password" placeholder="Password" />       <button>Log In</button>     </form> </script> 

why is this? Is there any way to include templates from an external source in a <script> tag?

(I cannot use $.get for this case, as it's not supposed to use web server right now and keep getting XHR errors doing it normally.)

Answer 1

Why it doesn't work

The <script> tag's src attribute will cause the browser to make a HTTP request for login.js. It won't, however, insert the response into the DOM. You'd need that to happen for your code to work.

Browsers don't do this for the simple reason that the HTML5 spec doesn't say that they should.

In particular, the scripting spec has lists of the actions that user agents must take when preparing a <script> tag and executing its source. These lists don't instruct browsers to insert the script's source into the DOM. The inline approach works because the script source is already in the DOM.

You can see this behaviour by inspecting any <script> tag with a src attribute - after loading, parsing and executing its source, it will contain no child nodes.

What you could do

You can load templates using AJAX requests, but it's not recommended - if your application has a small number of templates it's simpler to just include them in your main HTML file; if it has several you'd need a lot of server round trips to fetch them.

The best solution is usually a build step that compiles your templates into a single Object in a JavaScript file, which can be included like any other script.

With a step like this that compiles your templates into a variable called AppTemplates, your code would look something like:

template: AppTemplates['templates/login.tpl'] 

Grunt has a task called grunt-contrib-jst that does this for Underscore.js templates. There are equivalent tasks for other template engines.