Ember hide parent template when viewing sub-route

Question

I am making a simple blog for my website with Ember.

My routes:

Router.map(function() {
  this.route('home', { path: '/' });
  this.route('blog', function() {
    this.route('post', {path: '/:post_id'});
  });
});

I want it so when I click on a post in /blog and wind up at /blog/:post_id I hide the content of the blog.hbs file and only show the blog/post.hbs content.

I tried specifying the render template explicitly in my post.js route file, but things kept working in the same fashion.

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('post', params.post_id, { reload: true });
  },
  renderTemplate: function() {
    this.render('blog/post');
  }
});

Reading through the documentation here didn't cue me into any other ideas.

https://guides.emberjs.com/v1.13.0/routing/rendering-a-template/

Am I fundamentally using Ember wrong? Should my post URL not be a sub-route of Blog if I want to hide a parent templates content?

Answer 1

Sorry, @remi answer do the job, but it is not the correct according to the convention.

When you create something like this:

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

It implicit creates

Router.map(function() {
  this.route('blog', function() {
    this.route('index', { path: '/' }); // <------ this one
    this.route('post', {path: '/:post_id'});
  });
});

So, if you got nested router, but don't want to nest templates, rename the blog template (and route) to index. It will be something like renaming:

with POD

app/blog/route.js -> app/blog/index/route.js

app/blog/template.hbs -> app/blog/index/template.hbs

No POD

app/routes/blog.js -> app/routes/blog/index.js

app/templates/blog.hbs -> app/templates/blog/index.hbs

This is documented on the Official guide (the link is for the latest version, but it is also applicable for older ones)