ember js development mode runtime template compile?

Question

I'm learning to work with Ember and Grunt precompiled HBS templates, but want to also run in a 'developer mode' where the the App will compile the HBS's at runtime, if it doesn't find them.

I've read about a few ways to go about this and am trying to do it with '$.ajax()' and 'Ember.Handlebars.compile(data)' where each template returned is added to the Ember.TEMPLATES array. This won't work off the file system, so I test it on a localhost tomcat where the Ember App is added to webapps/ROOT.

I'm working with a demo 'user admin' App I found online which uses a couple of components, helpers and 'generated controllers'. So the Templates compile OK, but there are problems with Helper registration, such as:

Handlebars error: Could not find property 'modal-box' on object (generated modal-demo controller).

...so after adding the Component Template to the Templates array, I try to register it by name:

if (templateName == 'components/modal-box') {
    Ember.Handlebars.helper('modal-box', function(value, options) {
        var escaped = Handlebars.Utils.escapeExpression(value);
        return new Handlebars.SafeString(tmpl);
    });
}

...but then I get this new error:

registerBoundHelper-generated helpers do not support use with Handlebars blocks. "Template was precompiled with an older version of Handlebars than the current runtime."

This is all done in an 'App create ready' function which iterates a list of template names, which I'd like to further develop to where it reads the template file names dynamically. The Grunt process also compacts the CSS and concatenates the scripts, so I would want to work out a 'developer mode' process for these too. But right now I'm focused on the HBS Templates & Components.

I'm thinking this must be a FAQ so am wondering if the community has arrived at a best practice for this sort of runtime compile for development?

If not how can I resolve my issue with getting the component template helper generated controllers registered correctly?

Answer 1

They just need to be registered before the other templates are compiled.

Em.TEMPLATES["components/cow-dude"] = Ember.Handlebars.compile("I'm a cow");

App = Ember.Application.create();

http://emberjs.jsbin.com/apIRef/28/edit

Order of operations is important, if it compiles the other templates first, they will just assume cow-dude is a property on the model in context (which will probably be undefined) (http://emberjs.jsbin.com/apIRef/27/edit). That being said, if you are going to lazy load componenets/helpers, those need to be loaded before any of their dependencies (Ember handles this all for you when you just toss them all in at once).

Additionally it sounds like you are using two different versions of Handlebars, which is why it's giving you the Template was precompiled with an older version of Handlebars than the current runtime.

I wrote up a similar response to someone else that might be of use to you: Ember.js with external handlebars template