title: Loading handlebars.js template from external html file shows nothing
body: <p>This question is a bit of a stretch of my JS skills, so I might explain it like an idiot.</p>
  
  <p>Here is my JavaScript to get the json from the server, and try to push it into a template:</p>
  
  <pre><code>    //Server Interface Start
  //Access the web api for The User:
  var lucidServer = (function () {
      //global error handler
      $(document).ajaxError(function (event, xhr) {
          alert(xhr.status + " : " + xhr.statusText);
      });
      //client Calls
      var getClients = function (id) {
          return $.ajax(clientUrl + "/list/" + id)
      };
      var getClient = function (id) {
          return $.ajax(clientUrl + "/details/" + id)
      };
  
      //push them out to the world!
      return {
          getClients: getClients,
          getClient: getClient,
      };
  }());
  //Server Interface End
  
  (function () {
      //list of clients
      var refreshClients = function () {
          lucidServer.getClients(1).done(showAllClients);
      };
      var showAllClients = function (templateInput) {
          var source;
          var template;
          var path = '../Templates/indexTemplates.html'
          $.ajax({
              url: path,
              cache: true,
              success: function (data) {
                  source = data;
                  template = Handlebars.compile(source);
                  $('#clientListOutput').html(template(templateInput));
              }
          });
      };
      $(function () {
          refreshClients();
      });
  }());
  </code></pre>
  
  <p>GetClients works fine and returns the Json data I am expecting. When I inspect the templateInput it is showing what I expect.</p>
  
  <p>Here is the external template:</p>
  
  <pre><code>&lt;script id="clientList" type="text/html"&gt;
  
  &lt;div id="clients"&gt;
      {{#each client}}
                  &lt;span data-id="{{this.iD}}" /&gt;
      &lt;div&gt;
          &lt;p&gt;{{this.iD}}&lt;/p&gt;
          &lt;p&gt;{{this.name}}&lt;/p&gt;
      &lt;/div&gt;
      {{/each}}
  &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>What I am ultimately aiming to do is hold either all my templates in one html file that I can call by script id, or have each template be its own file that I can call. When I run this page nothing is showing up, there's no error or anything. Here is the entire index page:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
  &lt;html class="no-js"&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;link rel="stylesheet" href="../../Content/normalize.css"&gt;
      &lt;link rel="stylesheet" href="../../Content/main.css"&gt;
      &lt;script src="../../scripts/libs/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--[if lt IE 7]&gt;
              &lt;p class="chromeframe"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; or &lt;a href="http://www.google.com/chromeframe/?redirect=true"&gt;activate Google Chrome Frame&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
      &lt;section id="Application"&gt;
          &lt;div id="clientListOutput"&gt;
          &lt;/div&gt;
          &lt;div id="clientCreateOutput"&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;footer&gt;
      &lt;/footer&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="../../scripts/libs/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
      &lt;script src="../../scripts/plugins.js"&gt;&lt;/script&gt;
      &lt;script src="../../scripts/main.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../../Scripts/libs/handlebars.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var freelancerUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Freelancer"})';
          var clientUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client"})';
          var projectUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Project"})';
          var storyUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Story"})';
      &lt;/script&gt;
      &lt;script type="text/javascript" src="../../Scripts/serverInterface.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>I changes the way my template looks slightly. Through debugging the js in Chrome tools it is telling me that 'data' is undefined in the ajax success line within showallclients.</p>