RequireJS & Jquery - Multiple templates in one file?

Question

I load some template files into my application using require.js:

define(function(require) { var App = require('app'), TeamListTmpl = require('text!templates/team-list.html'), PlayerListTmpl = require('text!templates/player-list.html'), PlayerItemTmpl = require('text!templates/player-item.html'); 

Then, using Backbone, I refer to the template as follows:

 var PlayerItemView = Backbone.View.extend({ tagName: "li", template: _.template(PlayerItemTmpl), 

This annoys the existence of separate template files, and I would like to combine all the templates into one html file and pull out the individual elements. I tried this:

  define(function(require) { var App = require('app'), Templates = require('text!templates/templates-combined.html'); 

If the file combined with html templates looks like this:

 <div id="some-element-1">1</div> <div id="some-element-2">2</div> <div id="some-element-3">3</div> 

But for some reason this does not work:

 $(Templates).find("#some-element-1").html(); 

I also tried:

 $('#some-element-1', Templates).html(); 

Is there a way to extract individual template files from a single merged file without first adding it to the DOM? Perhaps javascript templates are used instead? Any help would be greatly appreciated.

Answer 1

I assume you want to use filter , not find :

 var some_element_1 = $(Templates).filter('#some-element-1').html(); 

You see, find searches in $(Templates) :

Get the children of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

to find things inside these three <div> , but not the <div> ; filter , on the other hand, performs a search on many elements:

Reduce the set of matched elements to those that match the selector or pass a function test.

When you say var x = $(Templates) , your x looks like this:

 [ <div id="..."></div>, <div id="..."></div>, <div id="..."></div> ] 

If we look at the descendants of those <div> (i.e. find ), we will not find #some-element-1 , but if we look at the set of matched elements themselves (i.e. filter ), we will find #some-element-1 .

If for some reason you really want to use find , you can wrap another <div> around your templates to make them be descendants of $(Template) :

 <div> <div id="some-element-1">1</div> <div id="some-element-2">2</div> <div id="some-element-3">3</div> </div> 

---

I also recommend that you wrap your templates in <script> and not <div> s:

 <script type="text/x-template" id="some-element-1">1</script> <script type="text/x-template" id="some-element-2">2</script> <script type="text/x-template" id="some-element-3">3</script> 

The browser will treat <script> as opaque black fields (assuming you use the correct type attribute), but it may try to interpret and correct the contents of <div> s. The problem is that your templates may be invalid HTML until you process them and fill them out; if you let the browser get invalid HTML, it might try to fix it, and that could create a big mess for your templates.