Nest tabs with embejs

1

Hello,

I’m working on a project in which I need to create multiple tabs after a button click. The button click to create these tabs is inside another tab content. I created a ModalComponent popup in which I stick in my tabs template. So far, everything works ok, but the issue I’m having is when I click on one of the tabs to view its content, its displays in its parent tab.

Below is the scenario:

  1. Parent tabs
> <ul>

   <li> {{#link-to "tab1"}} Tab 1 {{/link-to}} </li>
   <li> {{#link-to "tab2"}} Tab 2 {{/link-to}} </li>
   <li> {{#link-to "tab3"}} Tab 3 {{/link-to}} </li>
</ul>
<div>
     {{outlet}}
</div>
  1. Child tabs. Note: these child tabs are created by clicking on button inside the “Tab 2” above.
> <ul>

   <li> {{#link-to "tab4"}} Tab 4 {{/link-to}} </li>
   <li> {{#link-to "tab5"}} Tab 5 {{/link-to}} </li>
   <li> {{#link-to "tab6"}} Tab 6 {{/link-to}} </li>
</ul>
<div>
     {{outlet}}
</div>

Issue: The content of my child tabs display inside my “Tab 2” content. What I would want is to have the content of the child tabs to display in its child “outlet” and not in its parent outlet.

After trying out multiple things and researching online, I still haven’t figured out how to do this.

Any help will be appreciated!

Thanks

2

I think by default a child view will only be rendered in an parent’s outlet if it is part of a nested route/template. Otherwise you’d have to use something like ember-wormhole or ember-elsewhere to render the child content in the parent “outlet”. So I guess I’d need more context: how is this stuff being rendered? Is it in the same route/template? Nested routes/templates? Components?

Screenshots would also be helpful for understanding what you’re going for and what’s happening.