title: placing Backbone.js templates into separate HTML files
body: <p>I just took over a web application from another developer, and I'm trying to clean it up.  Currently there is only a single HTML file, and it is over 1,000 lines long.  It contains at least a dozen Backbone templates, and I would really like to separate them into their own files.  I'm not an expert in Backbone, and I've been searching the internet for a good while without finding much help.  It seems that there should be a very simple, elegant, and even recommended way of doing this, but I have yet to discover it.</p>
  
  <p>So, say we've got some code like this in index.html:</p>
  
  <pre><code>&lt;script type="text/template" id="myTemplate1"&gt;
      &lt;p&gt;Hello&lt;/p&gt;
  &lt;/script&gt;
  &lt;script type="text/template" id="myTemplate2"&gt;
      &lt;p&gt;World!&lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I place them in separate files, such that Backbone will still be able to access them?</p>
  
  <p>Edit:
  Hi Anatoliy, thank you for your help.  I've had some time to play around with this today, but I'm not sure where to put things.  I inherited this code:</p>
  
  <pre><code>define(function (require, exports, module) {
      var $ = require('jquery'),
          _ = require('underscore'),
          Backbone = require('backbone'),
          Handlebars = require('handlebars'),
          jqueryUI = require('jquery-ui');
  
      var myView = Backbone.View.extend({
          tagName: 'div',
          className: 'myView',
          template: Handlebars.compile($('#myView').html()),
  </code></pre>
  
  <p>So where would you recommend putting the code you suggested?  I tried inserting it in the Handlebars.compile() function with no luck.  Thank you for your help, I just can't seem to find much of anything on the internet in terms of examples or guides.</p>