Ember {{outlet}} routing/rendering model fails at deep expanded lists

Design
1

Say you are trying to build an accordion view with a list of artists at ArtistsRoute or /artists

  • Pink Floyd
  • The Beatles
  • Bob Dylan

Next lets say that I want to be have an ArtistAlbums route under that, at /artists/the-beatles/albums

If I want to render this at the top, all is well and good, I stick my {{outlet}} above everything else and I’m done.

But what if I want something like this?

  • Pink Floyd
  • The Beatles
    • Sgt. Peppers Lonely Hearts Club Band
    • The White Album
    • Revolver
  • Bob Dylan

How do I position my outlet to receive my artist-albums template? Current solutions to this problem on stack exchange suggest using partial or component that conditionally renders a template based on whether it is the current item. This is a little clunky and unconventional; but it will work so long as the example gets no more complex than the above.

But what if I want to have an AlbumTracks route that would live at /artists/the-beatles/albums/revolver looking something like this…

  • Pink Floyd
  • The Beatles
    • Sgt. Peppers Lonely Hearts Club Band
    • The White Album
    • Revolver
      • Taxman
      • Elanor Rigby
      • …
  • Bob Dylan

At this point Ember asplode. It is not possible to do the above in ember (in a routable way) without resorting to some really weird routing hacks to make conditional outlets not bring everything crashing down.

Is there something I’m missing here? Or is this a use case that Ember currently fails to support adequately?

2

Not trying to hijack this thread but I am also running into an issue with {{outlet}}. I want to render lists that go to the right and automatically wrap at browser size (basic HTML functionality) but everytime I make an {{each}} loop the items render down.

This gets more complicated when I want to render child items to the right (Like the OP) that have children n layers deep where n is infinite: 1 1 1 1

Not

1
1
1
1