Workflow for using precompiled ember/handlebars templates

Question

So, I've got my Ember views set up to use external template files (.handlebars). The general mechanism is like so. I'm using requirejs module format:

define([
    "ember",
    "text!templates/drawer-menu.handlebars"
], 
function(Ember, drawerMenu) {
    var DrawerMenu = Ember.View.extend({
        template: Ember.Handlebars.compile(drawerMenu),
    });

    return DrawerMenu;
});

Now, I've set up my project so I can use GruntJS for things like bundle, uglify, minify and pack all the css & js files.

I'd also like to precompile my templates. So I set up grunt-ember-templates which nicely packs all my templates into one js file. The generated js file looks like this:

define(["ember"], function(Ember){
    Ember.TEMPLATES["drawer-menu"] = Ember.Handlebars.template(
        function anonymous(Handlebars,depth0,helpers,partials,data) {
           ....
           return buffer;
        });
);

I undestand, I should now be using Ember.TEMPLATES["drawer-menu"] instead of Ember.Handlebars.compile(drawerMenu) whenever I need the template data.

My question is how should I be setting up the development workflow? I mean

1. Should I change my code to always use the precompiled templates, in which case I'll always have to precompile in my development environment also.

2. If I don't do the above, then every time I build for production, I have to manually edit all view files to use precompiled templates. Something error prone.

Is there a mechanism to set this up automatically?

Answer 1

i'd switch to lazy loading templates and always precompiling. They get compiled client side and it isn't like they are any less useful for debugging client side.

var DrawerMenu = Ember.View.extend({
    templateName: 'drawer-menu',
});