title: RequireJS & Jquery - Multiple templates in one file?
body: <p>I am loading some template files into my application using require.js like so:</p>
  
  <pre><code>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');
  </code></pre>
  
  <p>Then, using Backbone, I am referencing the template like so:</p>
  
  <pre><code>var PlayerItemView = Backbone.View.extend({
      tagName: "li",
      template: _.template(PlayerItemTmpl),
  </code></pre>
  
  <p>It's kind of annoying having individual template files and I'd like to combine all the templates into one html file and pull out individual elements. I tried this:</p>
  
  <pre><code>   define(function(require) {
          var App = require('app'),
          Templates = require('text!templates/templates-combined.html');
  </code></pre>
  
  <p>Where the templates-combined html file looks like this:</p>
  
  <pre><code>&lt;div id="some-element-1"&gt;1&lt;/div&gt;
  &lt;div id="some-element-2"&gt;2&lt;/div&gt;
  &lt;div id="some-element-3"&gt;3&lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't work for some reason:</p>
  
  <pre><code>$(Templates).find("#some-element-1").html();
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>$('#some-element-1', Templates).html();
  </code></pre>
  
  <p>Is there any way to extract the individual template files from the one combined file without adding it to the DOM first? Perhaps using javascript templates instead? Any help would be greatly appreciated.</p>