Conditionally render nested parent route

@Hummingbird wrote:

consider the following routes:

• post: render the details about a post
• post/edit: renders editable details about the post (this might be quite different from post)
• post/comment: renders post AND details about the comment

The issue here is that we need to render the post template in the following two routes: post and post/comment. We explicitly do not want to render the post template on the route post/edit.

Usually one would put stuff that should not be rendered when the child route is active in the corresponding post/index template. However, now we need to copy all that stuff from that template to the post/comment template as well.

Alternatively one might put everything that needs to be shared in post and post/comment into a component. However, now we need to put all our actions into the component as well, violating the DDAU principle or we need to duplicate that logic to post and post/comment controllers.

Lastly, we could make use of the router service and conditionally render only {{outlet}} (edit) or the whole template using a simple if in our post template and a computed property in the controller:

showPost: computed('model', 'router.currentURL', function() {
    return !this.get('router').isActive('post.edit', this.model);
  }),

Now when the edit route is active, the parent template is not rendered. On every other child route the template gets rendered.

However this seems to be quite a workaround. Is there a better solution?

Posts: 1

Participants: 1

Read full topic