Define an application template in Ember.View in the latest version of Ember.js Build

Question

I recently upgraded to the most recent build of Ember.js (created on the GitHub page.)

When using a new router does this stop working?

App.ApplicationView = Ember.View.extend({ template: Ember.Handlebars.compile("Hello") }); 

I prefer to define my templates in a js file rather than index.html. I find it much cleaner. However, the above does not display!

Any suggestions? Thanks!

Answer 1

For Ember 1.0, templates must be defined in index.html or in separate files that are provided to your application through the build tool.

Some examples:

• For grunt
• For brunch
• For Rails Asset Pipeline
• For iridium
• Standalone Precompiler

If you really want to place your template in JavaScript, you can put it in your application template:

 <script type="text/x-handlebars"> {{view App.MyView}} </script> 

And then define your view:

 App.MyView = Ember.View.extend({ template: Ember.Handlebars.compile("Whatever you want here") }); 

So the happy path in Ember is to use external templates for each of your routes, either in your HTML when you start, or use the build step so that you can leave them outside your index.html.