title: How to load templates with Hogan.JS from an external file?
body: <p>I use <a href="http://twitter.github.com/hogan.js/">Hogan.JS</a> as JavaScript templating library. It is supposed to load JavaScript templates from external files. One can probably outsource several templates in an external JavaScript file. </p>
  
  <p>Does anyone know how to do that?</p>
  
  <p>I have the following code sample:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Hogan.JS Test&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;script src="js/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/hogan-2.0.0.min.js"&gt;&lt;/script&gt;
      &lt;script id="scriptTemplate" type="text/mustache"&gt;
        &lt;p&gt;Your text here: {{text}}&lt;/p&gt;
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script&gt;
        var data = {
          text: 'Hello World'
        };
  
        var template = $('#scriptTemplate').html();
        var compiledTemplate = Hogan.compile(template);
        var renderedTemplate = compiledTemplate.render(data);
  
        var box = document.createElement('div');
        box.innerHTML = renderedTemplate;
        document.body.insertBefore(box,document.body.childNodes[0]);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With the IDs I can address the templates but I always need a separate inline script. :-(</p>
  
  <p>How does this work with external files?</p>