_underscore templating - loading templates from external files

Question

I've seen a few long winded answers to how to load templates for rendering in respect of the _underscore templates utility and the like. What I've got below works:

$.ajax({
    url: 'template.tmp',
    type: 'get',
    success: function(data) {
        $('html').append(data);
    }
});

The code sits after jquery is loaded but before any scripts using the templates. Would this be ok or is there a reason why it wouldn't be a good idea to load templates like this? The templates.tmp file has templates within

<script type="text/template" id="tmpId"></script>

tags. They seem to get loaded into the DOM pretty much instantly. I'm prepared to be criticised for this implementation, but I'd just like to know why. The only thing I can think of is perhaps some processing if "error:" gets called instead of "success:". Thx.

Since `$.ajax()` is asynchronous, you could run into the situation where the code that uses those templates is run *before* the templates are loaded into the DOM. Also, any reason why not to include the templates in your main HTML to begin with? — robertklep, May 05 '13 at 15:45
@robertklep I suppose I could put a check in the template related functions for the elements first with a setInterval to check they're in the DOM, so now the code starts getting longer. It's a very valid point though and should be checked for. As for why. I'm reading everywhere that a modular approach is best practice. — dewd, May 05 '13 at 15:58
well, a modular approach is recommendable, but once you have to start using `setInterval` to check for the availability of templates in the DOM you should wonder if it's the correct approach in this use case :) Perhaps the code that renders the templates could demand-load them (and store them somewhere if they need to render them repeatedly)? ([perhaps useful](http://stackoverflow.com/a/7542468/893780)) — robertklep, May 05 '13 at 16:03
Maybe. If I know it's likely they're going to be used, loading them in advance asynchronously and checking for their presence is going to be easier on the user. — dewd, May 05 '13 at 16:08
True, that's why I would opt for including them in the HTML to begin with :) — robertklep, May 05 '13 at 17:01

dewd · Accepted Answer · 2013-05-06T21:36:42.503

I decided to produce my own OO based solution. This is the constructor:

var TemplateLoader = function(templatePath) {
    this.template = templatePath;
    this.loaded = false;
    this.error = false;
}

And these are the methods:

TemplateLoader.prototype.setReady = function (state) {
    this.loaded = state;
}
TemplateLoader.prototype.setError = function (state) {
    this.error = state;
}
TemplateLoader.prototype.isReady = function () {
    return this.loaded;
}
TemplateLoader.prototype.isError = function () {
    return this.error;
}
TemplateLoader.prototype.loadTemplate = function() {
        templateLoader = this;
        $.ajax({
            url: this.template,
            type: 'get',
            success: function(data) {
                $('html').append(data);
                templateLoader.setReady(true);
            },
            error: function() {
                templateLoader.setError(true);
            }
        });
}

And this is how to use it:

templateLoader = new TemplateLoader('template.tmpl');
templateLoader.loadTemplate();

And to check the template has loaded:

templateLoader.isReady() //true for loaded
templateLoader.isError() //true for error loading template, eg. template doesn't exist

Again, I'd appreciate any feedback on issues anyone could see with this code. How about checking for the DOM object appended to the HTML. Worthwhile?

_underscore templating - loading templates from external files

1 Answers1