{"id":1482,"date":"2022-08-30T15:16:54","date_gmt":"2022-08-30T15:16:54","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/23\/how-to-instantiate-the-ember-application-when-using-precompiled-templates-with-grunt-ember-templates-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:54","modified_gmt":"2022-08-30T15:16:54","slug":"how-to-instantiate-the-ember-application-when-using-precompiled-templates-with-grunt-ember-templates-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-to-instantiate-the-ember-application-when-using-precompiled-templates-with-grunt-ember-templates-collection-of-common-programming-errors\/","title":{"rendered":"How to instantiate the Ember Application when using precompiled templates with grunt-ember-templates-Collection of common programming errors"},"content":{"rendered":"

(This questions is related to this one, but now I have moved to grunt-ember-templates<\/code> instead of grunt-contrib-handlebars<\/code>)<\/p>\n

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<\/code>, configured as follows:<\/p>\n

ember_templates: {\n    compile: {\n        options: {\n            templateName: function(sourceFile) {\n                return sourceFile.replace(\/app\\\/templates\\\/\/, ''); \/\/ \/scripts\/\n            }\n        },\n        files: {\n            '\/scripts\/templates.js': [\n                '\/templates\/**\/*.hbs'\n            ]\n        }\n    }\n}\n<\/code><\/pre>\n
This creates a dist\/scripts\/templates.js<\/code> as expected, which my client is happily loading. The templates.js<\/code> looks like this:<\/p>\n
Ember.TEMPLATES[\"accounts\"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {\n    ...\n<\/code><\/pre>\n
This looks fine to me: the templates are saved in Ember.TEMPLATES<\/code> array, with expected keys. There is even an application<\/code> key, further down the generated templates.js<\/code> file:<\/p>\n
Ember.TEMPLATES[\"application\"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {\n<\/code><\/pre>\n
Which is coming from templates\/application.hbs<\/code>:<\/p>\n
\n\n\n  \n      ...\n  \n\n  {{ outlet }}\n\n\n\n\n    \n      ...\n\n<\/code><\/pre>\n
Still, I am getting this error when templates.js<\/code> is loaded (which is actually embedded inside scripts.js<\/code>, see below my index.html<\/code>):<\/p>\n
Uncaught Error: assertion failed: You specified the templateName application for , but it did not exist.\n<\/code><\/pre>\n
What does this criptical error mean and how can I get rid of it?<\/p>\n
This is my Ember Application<\/code>:<\/p>\n
this.App = Ember.Application.create({\n    LOG_TRANSITIONS: true,\n    VERSION: '1.0.0',\n    ready: function () {\n        console.log('App version: ' + App.VERSION + ' is ready.');\n    }\n});\n<\/code><\/pre>\n
This is my ApplicationView<\/code>:<\/p>\n
App.ApplicationView = Ember.View.extend({\n    templateName: 'application'\n});\n<\/code><\/pre>\n
This is my index.html<\/code>:<\/p>\n
\n\n\n\n  \n  \n    \n    \n    \n    \n    \n\n    \n    \n    \n    \n    \n    \n\n  \n  \n\n    \n\n    \n\n    \n\n      \n          <\/code><\/pre>\n
    \n
  • Prev<\/code><\/li>\n
  • 1<\/code><\/li>\n
  • 2<\/code><\/li>\n
  • 3<\/code><\/li>\n
  • 4<\/code><\/li>\n
  • Next<\/code><\/li>\n<\/ul>\n
    \n      \n    \n\n    \n    \n    \n    \n    \n    \n    \n    \n    \n\n  \n\n<\/pre>\n
      \n
    1. \n
      For the record: my problem was solved by changing the order in which the javascript files are loaded.<\/code><\/p>\n
      The templates.js<\/code> must be loaded after<\/em> ember is loaded.<\/code><\/p>\n
      I thought that ember needs the templates defined before loading, but this is actually completely wrong: since the templates are stored in Ember.TEMPLATES<\/code>, ember must be loaded before<\/strong> the templates are. Then the templates can be loaded, and then the application can be created.<\/p>\n
      The reason why I did not find this bug before is that ember is not complaining at all in the console.<\/p>\n<\/li>\n
    2. \n
      I’ve been using template:<\/code> instead of templateName:<\/code>, and it seems to work fine:<\/p>\n
      template: Ember.TEMPLATES['application']\n<\/code><\/pre>\n
      There may be a better way to do this. But this will at least get you unstuck.<\/p>\n<\/li>\n<\/ol>\n
      Originally posted 2013-11-23 09:50:05. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
      (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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1482","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1482"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1482\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}