Question

So I’m building an Ember.js application. I’ve got more than two routers now, so it’s becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.

I can’t seem to figure out how to have handlebar templates outside of the html! The other thing is that I’d like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.

So to clarify:

• I already stuff templates in index.html via <script> tags, I don’t like it.
• I don’t want to jump back 20 years and put HTML in strings inside my javascript.
• AJAXing static views seems ridiculous.

Answer 1

Without adding anything to the stack I don’t see how you could do it other then putting them in index.html or in code one way or the other.

With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.

You could compile your templates in code like so:

App.View = Em.View.create({
  template: Em.Handlebars.compile('{{outlet}}');
});

or if you are extending the view:

App.View = Em.View.extend({
  defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});

or you could register them like so

App.register('template', 'ViewName', Ember.Handlebars.compile(template));