Search code examples
ember.js

Render only child template in ember js

I have an Ember.js application, and I have a route called parent/child. When I render the parent/child template, I only want the content inside the parent/child template to be displayed. I don't want the contents from the parent template to be rendered. How can I achieve this?

I tried using display:none and display:block on the current route, but it doesn't seem to be the correct approach. How can I prevent the parent template from being loaded at all?

Solution

  • If you want the parent content to be hidden when you navigate to the child, you'll want to utilize the implicit parent/index.hbs route (don't add this to app/router.js (that creates index/index routes)).

    For example

    Before

    parent.hbs

    <h2>hi</h2>

{{outlet}}

    After

    parent.hbs

    {{outlet}}

    parent/index.hbs

    <h2>hi</h2>