title: Marionette 'could not find template' - load external templates
body: <p>I'm new with backbone, and also marionette. Idk why I'm get this error. My structure seems correct, but the error persists.</p>
  
  <p>This is my <code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Main App --&gt;
      &lt;div id="main-area"&gt;&lt;/div&gt;
  
      &lt;!-- Templates --&gt;
      &lt;script id="main-tpl" src="templates/main.tpl" type="text/x-template"&gt;&lt;/script&gt;
  
      &lt;!-- 3rd party Dependencies --&gt;
      &lt;script src="vendor/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/underscore/underscore.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/backbone/backbone.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/backbone.wreqr/lib/backbone.wreqr.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/backbone.babysitter/lib/backbone.babysitter.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/marionette/lib/backbone.marionette.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      // External templates load
      _.each(document.querySelectorAll('[type="text/x-template"]'), function (el) {
          $.get(el.src, function (res) {
              el.innerHTML = res;
          });
      });
  
      var App = new Backbone.Marionette.Application();
      _.extend(App, {
          Controller: {},
          View: {},
          Model: {},
          Page: {},
          Scrapers: {},
          Providers: {},
          Localization: {}
      });
      App.addRegions({
          Main: '#main-area'
      });
      App.addInitializer(function (options) {
          var mainView = new App.View.Main();
          try {
              App.Main.show(mainView);
          } catch(e) {
              console.error('Error on Show Main: ', e, e.stack);
          }
      });
  
      App.View.Main = Backbone.Marionette.Layout.extend({
          template: '#main-tpl'
      });
  
      (function(App) {
          'use strict';
          App.start();
      })(window.App);
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and my <code>template/main.tpl</code> is only test html.</p>
  
  <pre><code>&lt;div&gt;sounds&lt;/div&gt;
  </code></pre>
  
  <p>All 3rd party dependencies paths are correct.</p>
  
  <p>The error that appears is this: 
  <code>Error: Could not find template: '#main-tpl'</code></p>
  
  <p>Can someone tell me where am I wrong?
  Thanks.</p>
  
  <p><strong>EDIT:</strong>
  I think the problem is because <code>$.get</code> is async and the template load after backbone try to render, how can I solve this?</p>