title: BackboneJS - Displaying external templates
body: <p>I'm having some problems with displaying external templates. So far I have main.js file, an index.html file, a header_content.html file (with some simple html code), a header.js view-file and a tpl.js file.</p>
  
  <p>my index.html is pretty simple and looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Backbone project&lt;/title&gt; 
  &lt;meta charset="utf-8"/&gt;
  &lt;link rel="stylesheet/less" type="text/css" href="css/style.less"&gt;
  &lt;link rel="stylesheet/less" type="text/css" href="css/admin.less"&gt;
  &lt;script data-main="js/config" src="js/libs/require.min.js"&gt;&lt;/script&gt;    
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>next, there is the main.js file:</p>
  
  <pre><code>require([
  'jquery',
  'lodash',
  'backbone',
  'utils/tpl',
  'views/header'
   ],
  
   function($, _, Backbone, HeaderMenuView, tpl) {
  
  IndexView = Backbone.View.extend({
      initialize: function(){
         this.el.html(); // is this right?
      }
  });
  
  var index_view = new IndexView({el:'#container'});
  
  tpl.loadTemplates(['header'], function() {
      window.app = new IndexView({el:'#container'});
      Backbone.history.start();
  });
  
  });
  </code></pre>
  
  <p>and then I have the header.js view file:</p>
  
  <pre><code>define(
  ['jquery', 'lodash', 'backbone', 'utils/tpl'],
  
  function($, _, Backbone, tpl) {
  
  var HeaderMenuView = Backbone.View.extend({
  
      initialize: function() {
          this.template = _.template(tpl.get('header_content'));
      },
  
      render: function(eventName) {
          this.$el.html(this.template());
          return this.el;
      },
  
  });
  
  return HeaderMenuView;
  
  });
  </code></pre>
  
  <p>and as last file, I have the tpl.js file, which looks like this:</p>
  
  <pre><code>define(
  ['jquery', 'lodash', 'backbone'],
  
  function($, _, Backbone) {
  
  var tpl = {
  
      templates: {},
  
      loadTemplates: function(names, callback) {
  
          var that = this;
  
          var loadTemplate = function(index) {
                  var name = names[index];
                  console.log('Loading template: ' + name);
                  $.get('templates/' + name + '.html', function(data) {
                      that.templates[name] = data;
                      index++;
                      if (index &lt; names.length) {
                          loadTemplate(index);
                      } else {
                          callback();
                      }
                  });
              };
  
          loadTemplate(0);
      },
  
      get: function(name) {
          return this.templates[name];
      }
  
  };
  
  return tpl;
  
  });
  </code></pre>
  
  <p>when I'm running this, I get several script error's :-/
  All I want is the header_content.html template to be displayed in the #container Div.</p>
  
  <p>what am I doing wrong?</p>