ember.js - router v2 template path

Question

I am having a look at the router v2 and I am finding that I have to declare the full path to the template like this:

WZ.ApplicationRoute = Em.Route.extend
  renderTemplate: ->
    @render('app/templates/nav/nav', outlet: 'nav')

I could create a view with temmplateName property but I really don't want to do that.

Is there a way I that I can just define my template like this:

@render('nav', outlet: 'nav')

Answer 1

In a typical environment you would not need to specify the full path when rendering a template. Ember is not doing anything magic. It checks for a template with the specified name in Ember.TEMPLATES. Fire up your app and from JS console try:

Ember.keys(Ember.TEMPLATES)

My guess is your template will be there under app/templates/nav/nav instead of nav.

How to fix this depends on what you are using to compile handlebars templates. Most build systems will allow you to specify the base path for template names.

Answer 2

Ember uses its convention to find the template which is either it is the name directly or the path to the name. If you only type nav, ember assumes it is the name.

Best documentation about this is always the source code which in this case is (file: packages/ember-routing/lib/system/route.js):

render: function(name, options) {
  if (typeof name === 'object' && !options) {
    options = name;
    name = this.routeName;
  }

  name = name ? name.replace(/\//g, '.') : this.routeName;

  var container = this.container,
      view = container.lookup('view:' + name),
      template = container.lookup('template:' + name);

  if (!view && !template) { return; }

  this.lastRenderedTemplate = name;

  options = normalizeOptions(this, name, template, options);
  view = setupView(view, container, options);

  appendView(this, view, options);
}

The reponse to your question is the line

name = name ? name.replace(/\//g, '.') : this.routeName;

So, the template's name for ember is either the name you give the template or the name based on the path where all slashes are converted to dots (by ember's convention).

Update, 8.2.2013 - Answer to question of @sudhanshu in comments

The default way how the template is used, is the configuration of the router for your application:

App.Router.map(function() {
  this.route("members");
  this.route("member",     { path: "/members/:refId" } );
  this.route("membernew",  { path: "/member/new" } );
});

The small example above shows 3 features of the router:

• "members" is just the name and applies the convention, i.e., no path is defined. Thus, emberjs will automatically use the path /members for that one.
• "member" uses a dynamic URL part in order to identify a ressource and load the right member. Here, you have to define the path.
• "membernew" also defines the path, because I do not want to use the default which would be /membernew

By the very same conventions, emberjs will try to load the template with the names you defined in the router. In the example above, emberjs expects the handlebar templates to have the names "members", "member", and "membernew".

A feature that is not show above is cascading routes into ressources. Please have a look at http://emberjs.com/guides/routing/ The emberjs team wrote a very nice guide about the topic.

So, in general emberjs is based on some nice conventions which allows you to avoid many coding lines. However, you have to stick to the conventions. For more complex applications, this will often not be possible.