Render only child template in ember js

Question

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?

Are you sure it should be a child route in this case? Why doesn't display:none seem correct? — Caltor
– Caltor, Commented Jun 7, 2024 at 10:51
Because, even if we do display none, it will still exist in DOM, and it can affect the performance of the site. — Anonymous
– Anonymous, Commented Jun 10, 2024 at 5:16

NullVoxPopuli · Accepted Answer · 2024-06-08 11:36:59Z

2

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>

answered Jun 8, 2024 at 11:36

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render only child template in ember js

1 Answer 1

Before

After

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Before

After

Comments

Your Answer

Sign up or log in

Post as a guest

Related