Handlebars precompiled templates returns undefined value

Question

I have a template file test_temp.handlebars. Its content is,

<div>Hello {{name}}</div>

I compiled the template in my command line using the command,

handlebars test_temp.handlebars -f test_temp.js

The content of the test_temp.js file is,

(function() {
var template = Handlebars.template, templates = Handlebars.templates =Handlebars.templates || {};
templates['test_temp'] = template({"compiler":[5,">=2.0.0"],"main":function(depth0,helpers,partials,data) {
var helper, functionType="function", escapeExpression=this.escapeExpression;
return "<div>Hello "
+ escapeExpression(((helper = helpers.name || (depth0 && depth0.name)),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+ "</div>\n";
},"useData":true});
})();

Now i read my precompiled template in my html.

var compiledTemplate = Handlebars.templates['test_temp'];
var temp_html = compiledTemplate({ name: 'World' });
console.log(temp_html);  //undefined

Here the value returned to the temp_html is undefined. Kindly let me know how to put this temp_html inside a div.

$("#tempdiv").html(temp_html);

When I update the temp_html inside the div, the error thrown is,

"Uncaught TypeError: undefined is not a function"

How to get the precompiled template value and insert it inside a div.

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

See this answer: https://stackoverflow.com/a/22214119/432089

If you downloaded your handlebars from npm, you will get the 2.0 alpha build instead of the stable 1.3.0 build. In other words, it's likely you have 2.0 alpha precompiled templates, but you are using the 1.3.0 runtime JS.

edited May 23 '17 at 12:07

Community

1
1

answered May 01 '14 at 03:58

Stephen

2,410
3
33
57

1

Thanks a lot for your link and i got the answer and it is working fine. – Jeevi May 01 '14 at 04:31

score 0 · Answer 2 · answered Apr 26 '14 at 03:36

0

Check this fiddle:

http://jsfiddle.net/8TMw4/

<script id="some-template" type="text/x-handlebars-template">
    <div>Hello {{name}}</div>    
</script>

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 
console.log(template);

answered Apr 26 '14 at 03:36

html_programmer

18,126
18
85
158

your code compiles the template in the browser. This will work. I need to compile my templates in back-end servers and read the js file as in my code which is not working. – Jeevi Apr 26 '14 at 04:58

score 0 · Answer 3 · answered Apr 26 '14 at 09:34

I have accomplished this task applying the following filters:

Precompile templates in the backend (Use the build tools you prefer).
Load the precompiled template to Ember.TEMPLATES['"+templateName+"'].
You must follow ember naming convention in order Ember recognise where your route, view, or component templates are located. This is the job of the Ember.DefaultResolver and ComponentLookup. Specific naming convention could be defined if you implement your custom resolver and assigned it to the application instance.

You could look at this demo example whose build tools are either rake-pipeline or broccoli.

Thanks for your reply. I have precompiled my .hbs file using ember-precompile. Now how can I read the template and place inside a div. I read like, var compiledTemplate = Em.TEMPLATES['precompile'];compiledTemplate({ name: 'World' }); but Cannot read property 'push' of undefined error is thrown — Jeevi, Apr 30 '14 at 17:58

Handlebars precompiled templates returns undefined value

3 Answers3

Linked