How to instantiate the Ember Application when using precompiled templates with grunt-ember-templates-Collection of common programming errors

2 years ago
admin
2 minutes

(This questions is related to this one, but now I have moved to grunt-ember-templates instead of grunt-contrib-handlebars)

I am trying to split my ember.js handlebars templates in several files, in order to make the code base more manageable. I am using grunt-ember-templates, configured as follows:

ember_templates: {
    compile: {
        options: {
            templateName: function(sourceFile) {
                return sourceFile.replace(/app\/templates\//, ''); // /scripts/
            }
        },
        files: {
            '/scripts/templates.js': [
                '/templates/**/*.hbs'
            ]
        }
    }
}

This creates a dist/scripts/templates.js as expected, which my client is happily loading. The templates.js looks like this:

Ember.TEMPLATES["accounts"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
    ...

This looks fine to me: the templates are saved in Ember.TEMPLATES array, with expected keys. There is even an application key, further down the generated templates.js file:

Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {

Which is coming from templates/application.hbs:




  
      ...
  

  {{ outlet }}




    
      ...

Still, I am getting this error when templates.js is loaded (which is actually embedded inside scripts.js, see below my index.html):

Uncaught Error: assertion failed: You specified the templateName application for , but it did not exist.

What does this criptical error mean and how can I get rid of it?

This is my Ember Application:

this.App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    VERSION: '1.0.0',
    ready: function () {
        console.log('App version: ' + App.VERSION + ' is ready.');
    }
});

This is my ApplicationView:

App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

This is my index.html:
  • Prev
  • 1
  • 2
  • 3
  • 4
  • Next

  1. For the record: my problem was solved by changing the order in which the javascript files are loaded.

    The templates.js must be loaded after ember is loaded.

    I thought that ember needs the templates defined before loading, but this is actually completely wrong: since the templates are stored in Ember.TEMPLATES, ember must be loaded before the templates are. Then the templates can be loaded, and then the application can be created.

    The reason why I did not find this bug before is that ember is not complaining at all in the console.

  2. I’ve been using template: instead of templateName:, and it seems to work fine:

    template: Ember.TEMPLATES['application']

    There may be a better way to do this. But this will at least get you unstuck.

Originally posted 2013-11-23 09:50:05.