How to define Handlebar.js templates in an external file

templates handlebars.js loading external
Naveen picture Naveen · Apr 11, 2014 · Viewed 10k times · Source

I am currently defining my Handlebars templates within the same HTML file in which they will be used.

Is it possible to define them as external templates, which can be called when the page is loaded?

Answer

Jeremy Belolo picture Jeremy Belolo · Aug 2, 2015

For those that get here through Google search like I did, I finally found the perfect answer in this post, check it out :

http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro

Basically you need to implement a method, getTemplate : 

Handlebars.getTemplate = function(name) {
    if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
        $.ajax({
            url : 'templatesfolder/' + name + '.handlebars',
            success : function(data) {
                if (Handlebars.templates === undefined) {
                    Handlebars.templates = {};
                }
                Handlebars.templates[name] = Handlebars.compile(data);
            },
            async : false
        });
    }
    return Handlebars.templates[name];
};

and then call your template with it :

var compiledTemplate = Handlebars.getTemplate('hello');
var html = compiledTemplate({ name : 'World' });

That way, if you precompiled the templates (great for production use) it will find it directly, otherwise it will fetch the template and compile it in the browser (that's how you work in development).

Related questions

How to find Array length inside the Handlebar templates?

I have a Handlebars template which is rendered using a json object. In this json I am sending an array. Like this: var json = { "array":["abc","def","ghi","jkl"] } Now in my template I want to find the length of …

Read More
How to use comments in Handlebar templates?

I am using Handlebar.js as my templating engine. Now I want to comment out some of the blocks in my handlebar templates. But then I realized that Handlebar doesn't ignore the expressions inside the Handlebar comment block. Any workaround …

Read More
Access a variable outside the scope of a Handlebars.js each loop

I have a handlebars.js template, just like this: {{externalValue}} <select name="test"> {{#each myCollection}} <option value="{{id}}">{{title}} {{externalValue}}</option> {{/each}} </select> And this is the generated output: myExternalValue <select …

Read More