title: using fetch to then compile a handlebarsjs template inside a promise
body: <p>Fetching data using <code>fetch</code> then executing it with Handlebars is easy enough when you've already compiled your templates ..</p>
  
  <pre><code>var template        = Handlebars.compile(the-html);
  fetch('data.json')
     .then(function(response) {
        return response.json();
     })
     .then(function(json) {
        var html = template(json[0]);
        // use this somehow
     });
  </code></pre>
  
  <p>But I want to fetch a number of files (markup and script that contain handlebars tags) based on some path that was pre-determined in the promise chain, and compile them as Handlebars templates and then apply these to some model I previously prepared, inside a promise chain.</p>
  
  <pre><code>var json = {some-data};
  some-promise-step()
  .then(function(json) {
     var templates = Handlebars.templates = Handlebars.templates || {}; // global handlebars object
     var urls = ["/abc/templates/" + json.template + "/index.html", "/abc/templates/" + json.template + "/style.css", "/abc/templates/" + json.template + "/script.js"]; // simplified
     var promises = urls.map(function(url) {
        return fetch(url).then(function(response) {
           var name = response.url.split("/").pop();
           return response.text().then(function(data) {
              templates[name] = Handlebars.compile(data);
           });
        });
     });
     return Promise.all(promises);
  }).then(function(result) { // result is an array of 'undefined' ?? hmm
    return Promise.all([
      zip.file("index.html", Handlebars.templates["index.html"](json)),
      zip.file("style.css", Handlebars.templates["style.css"](json)),
      zip.file("script.js", Handlebars.templates["script.js"](json)),
    ]);
  }).then( // more steps 
  </code></pre>
  
  <p>Handlebars needs to compile into the global Handlebars.templates[] object (which already exists) before they can be used by the next step (in which the <code>zip</code> object is fed the output of the applied template and returns a promise)</p>
  
  <p>But by the time the fetches have returned and the <code>.text()</code> method returns to compile the template, the outer promise has resolved and started trying to use the templates. </p>
  
  <p>I don't want the final <code>.then(</code> to begin doing what it needs to until after the fetch promises have all resolved...</p>