Is this the "Ember Way" to render many instances of one controller simultaneously?

1

Here’s a JS Fiddle of what I’m talking about.

I am rendering three Items on screen via the {{render}} helper, each of which shows the Item’s Subitems. (I can’t just use outlets, as multiple expanded items must be visible at the same time).

Subitems is properly initialized with their own unique instances of the SubitemsController. However, in the subitems template and controller, the controllers.item references whatever Item was opened last.

This is bad, because if I were to put a Create Subitem form inside of the subitems template and associate it as a child of the Item, it will associate the new Subitem with the most recently opened Item, instead of the Item the form is actually in.

How can I work around this and ensure I can access the proper Item from the SubitemsController and/or subitems template? Or, what is the “Ember Way” to render multiple instances of a controller on screen simultaneously?

2

From what I can tell, you’re rendering the subitem based on your route. The route and URL map one to one. Therefore, you can only select one route path (and one subitem) at a time. You can’t expand one route, leave it open, and then expand another route. There’s only one URL. If you weren’t in jsbin, you would see your URL changing, and it would be clearer. So I think a nested route is the wrong abstraction here. You may simply want to go with a view. {{#each}} lets you specify an item controller and item view if you need it.

3

That was, in fact, the intent. I wanted the URL to map to the most recently opened subitem, so that if the user bookmarks or refreshes, they maintain the application state.

However, that causes the issue above. Is there really no way to both use the nested route to maintain application state, but create a Subitem in an Item of my choice?