Ember JS renders default template after adding new route

Question

I'm trying to make some proof of concepts, and learning the ember js framework concepts. I came across an issue, that is bugging me for hours... here's the thing:

I created a simple ember-cli app using the windows command prompt. Everything works fine, the default route get's hit and the application.hbs is rendered.

After that I added a blogposts.hbs to the templates, that has just static html:

<h1>Blog posts</h1>
<div>These are the blogposts:</div>

Also added a route to the /router.js

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

// -or-

Router.map(function() {
    this.route('blogposts');
});

Tried both of the above. And added a linkto to the application.hbs that should link to the blogposts route.

<h2 id="title">Welcome to Ember</h2>

{{#link-to 'blogposts'}}Blogpost linkto{{/link-to}}

THE PROBLEM: this route seems like never gets hit. I tried to navigate to localhost:4200/blogposts, tried the link that's generated, I also tried the hash: #/blogposts, but none of these render me the blogposts template. If I understand it correctly ember should generate a default controller for the blogposts if I don't specify one, and also a model shouldn't be required to render that template. I know this has to be some minor thing that I'm missing, but I can't seem to understand where am I wrong.

Every helps is much appreciated!

Thanks!

PS. I almost forgot, I am using the following: Ember : 1.13.11 Ember Data : 1.13.15 jQuery : 1.11.3

Have you tried to create a route named "blogposts" in your routes folder? — Bruno Paulino
@BrunoPaulino Thanks for the quick response, I tried that one too, but didn't work. I found the answer in the meanwhile! — zolipapa

zolipapa zolipapa · Accepted Answer · 2016-01-19T13:14:41

OK, just 5 minutes after I posted the question I got the answer! I was missing the {{outlet}} from the application.hbs!

It was not clear for me that the application.hbs is like a layout of some sort, and it will allways be rendered. I thought that based on the routes the application.hbs will be replaced by the blogposts, but it's not like that.

With the default routes in place the application template will be rendered first and the additional templates will be rendered to placeholder (the {{outlet}}).

Ember JS renders default template after adding new route

1 Answers