2

This is not really a Mustache.js or Handlebars.js specific question but both frameworks would have this problem if you are trying to optimize the performance loading templates for your web app.

Right now I am loading the templates from the same domain as the rest of the app, but I would like to load my templates from the CDN if possible. The largest problem with this is that I can't cross browser can't load text files via AJAX.

What other methods can I try to optimize the load time of individual templates cross domain?

I have worked on optimizing the load order ( worked )

loading the templates as xdomain script files in the head ( failed )

<script type='text/html' src="http://domain.cdn.com"></script>

I think CORs support would be limited to the number of browsers.

Using YQL would be slow.

Can I somehow do what JSONP does, but with an XML, XHTML, or HTML, obviously without the javascript callback? Maybe the end of the template could have a small callback function, but I wouldn't want to wrap the whole thing and need to escape it as json.

jdavid.net
  • 741
  • 9
  • 16
  • 1
    Don't think this is possible. Have a look at: http://stackoverflow.com/questions/7531823/use-jsonp-to-load-an-html-page – mccannf Jan 28 '13 at 23:54

2 Answers2

3

One idea off the top of my head.

Use RequireJS to build the templates into a single file. Each template would be wrapped as a define module and the template will be properly escaped as a string.

Because the file would be .js it could be loaded as normal from another domain

So if the text plugin determines that the request for the resource is on another domain, it will try to access a ".js" version of the resource by using a script tag. Script tag GET requests are allowed across domains. The .js version of the resource should just be a script with a define() call in it that returns a string for the module value.

Example: if the resource is 'text!example.html' and that resolves to a path on another web domain, the text plugin will do a script tag load for 'example.html.js'.

https://github.com/requirejs/text#xhr-restrictions

If you also compiled your Mustache/Handlebars templates it would be even more performant. Here is an example of a compiled Handlebars template wrapped in a define call. The Handlebars compiler takes care of the output and then the RequireJS builder will include all of them in one file for you.

Again, not tried this solution but might put you on the right track.

Simon Smith
  • 8,024
  • 2
  • 30
  • 40
  • Could you please provide an example on how to merge all HTML template files into one JS file? your answer doesn't mean much if I would need to dedicate 1-2 weeks of my life to understand how to use require.js. it's such a broad, complex tool. – vsync Apr 08 '14 at 13:38
1

I'm aware that I'm trying to answer an old question .. This is quite doable by embedding template strings in a static HTML document, wrapped in a element with the attribute type="text/x-handlebars-template". This is known as micro-templating. Because of the type attribute, the browser won't try to execute the script. For example -

<script id="list-template" type="text/x-handlebars-template">
    <p>YUI is brought to you by:</p>

    <ul>
        {{#items}}
            <li><a href="{{url}}">{{name}}</a></li>
        {{/items}}
    </ul>
</script>

Once done we have to compile and then render it passing the data object.

<script>
YUI().use('handlebars', 'node-base', function (Y) {
// Extract the template string and compile it into a reusable function.
var source   = Y.one('#list-template').getHTML(),
    template = Y.Handlebars.compile(source),
    html;

// Render the template to HTML using the specified data.
html = template({
    items: [
        {name: 'pie', url: 'http://pieisgood.org/'},
        {name: 'mountain dew', url: 'http://www.mountaindew.com/'},
        {name: 'kittens', url: 'http://www.flickr.com/search/?q=kittens'},
        {name: 'rainbows', url: 'http://www.youtube.com/watch?v=OQSNhk5ICTI'}
    ]
});

// Append the rendered template to the page.
Y.one('body').append(html);

});

For details please refer here - http://yuilibrary.com/yui/docs/handlebars/

Subhasis
  • 39
  • 1
  • 5