refactoring our js templating using curl

gistfile1.js

======
BEFORE
======
This is how we currently do 'JS templating' when we want to insert
snippets of markup into the DOM: Strings of markup in an array,
using [].join(''); We then do String.replace() to replace the 
{{placeholders}} with content.

// minihyper.js
define([
    'module/bootstrap'
], function(
    news
) {

    var numMiniHyperpuffStories = 4,

        miniHyperTemplate = [
            '<aside class="pullout mini-hyper">',
                '<div class="pullout-inner">',
                    '<h3 class="heading">{{title}}</h3>',
                    '<div class="related-items">{{content}}</div>',
                '</div>',
            '</aside>'
        ].join(''),

    // ...
    // do stuff with template below
    // ...
});


=====
AFTER
=====
Alternatively, we can use curl and the text! plugin to reference a 
.html file. (We don't currently have this, so maybe we could 
rebuild to curl.min.js to include it...Tom?). This way, markup 
stays as markup without having to wrap it in nasty quotes. We 
can still keep the {{placeholder}} syntax as curl reads the html
file in as a string. Thoughts?

// minihyper.js
define([
    'module/bootstrap',
    'text!module/hyperpuff/minihyperTemplate.html'
], function(
    news,
    miniHyperTemplate
) {

    var numMiniHyperpuffStories = 4;

    // ...
    // do stuff with template below
    // ...
});

// module/hyperpuff/minihyperTemplate.html
<aside class="pullout mini-hyper">
    <div class="pullout-inner">
        <h3 class="heading">{{title}}</h3>
        <div class="related-items">{{content}}</div>
    </div>
</aside>

can the actual template be bundled into all.js ?

or doe s it have to be an additional http request?

I'm assuming it would just get bundled into all.js, just like any other AMD module...would be worth checking that though to find out

We could even set:

var curl = {
  baseUrl: '<?= $this->staticPrefix; ?>/js/',
  paths: {
    'templates': 'templates'
  }
}  

so that our directory structure could look like this?

/js
    /modules
        /hyperpuff
    /templates
        /hyperpuff

It would break the all.js I think as that has to be JS for the rest of the JS to work. Unless it was a string but that would break the point of doing this.

<i_told_you_so>If we had used reqwest and ender properly 12 months ago instead of AMD we wouldn't have this problem</i_told_you_so>

That last comment was marked up in a <sarcasm> tag.

From requirejs.org:

The text files are loaded via asynchronous XMLHttpRequest (XHR) calls, so you can only fetch files from the same domain as the web page.

However, the RequireJS optimizer will inline any text! references with the actual text file contents into the modules, so after a build, the modules that have text! dependencies can be used from other domains.

I tried using text! for the mini-hyper template, but ran into the x-domain issue described above. I don't know whether we can set Access-Control-Allow-Origin on certain files for this?

As for the compilation, it seems it just converts it to a string. But that's not a problem, right? It was a string before using [].join() anyway...