Starting with ember, route not displaying

Question

I am studying Ember and just started the tutorial on the website, and I m a bit lost with the router concept.

I used the ember router generation, and it worked great.

I have now in app folder :

./router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('toto', {path: '/toto'});
});

export default Router;

./templates/toto.hbs

<h1>Toto page</h1>

./routes/toto.js

import Ember from 'ember';

export default Ember.Route.extend({
});

When i try to access my http://url.com/toto, it displays me the default application.hbs template view;

Am I missing something ?

Do you have a application.hbs template? It should have {{outlet}} inside it. — jfhs

Artur Smirnov Artur Smirnov · Accepted Answer · 2015-09-08T09:24:41

Ember router builds final view as a tree and the root of the tree is always the application route. So now you have two routes: application and toto. And Ember router renders them one by one. It builds template for toto route and tries to append it to the outlet of the parent route template which is application in your case. Assuming that, is there {{outlet}} in your application.hbs? If not then you have to put it to the appropriate place.

Also Ember Inspector is very usefull for debugging Ember applications. It can show you which routes are rendered, which templates, components, controllers, etc are used.

Starting with ember, route not displaying

1 Answers