Ember.js Router App Architecture -- How to have multiple nested view/controller pairs

Question

I have an ember app and the concept of the outlet and connecting the outlet is fine, I get that. What I don't understand is how to have more than one view/controller view inside of another one without insane nesting

Suppose I am designing icloud clone where I have email functionality and a photo gallery functionality. Now if I wanted to accomplish something like

***********************************************************
* INBOX LIST     **  COMPOSE OR VIEW MESSAGE              *
*                **                                       *
*                **                                       *
*                **                                       *
*                **                                       *
* CONTACTS LIST  **                                       *
*                **                                       *
*                **                                       *
*                **                                       *
*                **                                       *
***********************************************************

The way that I would want to design this would be something like

EmailController/View
|-- SplitViewController/View
   |-- InboxListController/View
   |-- ContactsListController/View
   |-- ComposeMessageController/View
   |-- ReadMessageController/View

Where I can hot swap these to the level of the SplitView or remove them alltogether, but I don't see a good way of doing this with only one outlet allowed. It would force me next things inside of things that should not be nested. Using the single outlet approach, my structure would look more like

EmailController/View
|-- SplitViewController/View
   |-- InboxListController/View
       |-- ContactsListController/View
           |-- ComposeMessageController/View
               |-- ReadMessageController/View

How would I find an architecture style that fits with Ember.js/Router that still allows for more complex nesting?

Mabel

Answer 1

Do you know you can name the outlets ? For example, in SplitView template, you can have one {{outlet inboxListView}}, one {{outlet contactsListView}} etc... when you do your connectOutlets stuff, you can do this like:

splitViewController.connectOutlet({name: 'inboxList', outletName: 'inboxListView'})
splitViewController.connectOutlet({name: 'contactsList', outletName: 'contactsListView'})

and so on...

Grouty

So then if you're using different named outlets for different views/model objects in SplitView, what would your router look like filling nested outlets with data? splitViewController.connectOutlet({name: 'inboxList', outletName: 'inboxList'}, router.get('store').findAll(App.Inbox))) and splitViewController.connectOutlet({name: 'contactsList', outletName: 'contactsList'}, router.get('store').findAll(App.Contact))) ? – Longoria

smth like this yes, but have to put the context into the hash. {name: 'contactsList', outletName: 'contactsList', context: router.get('store').findAll(App.Contact)}) see emberjs.com/api/classes/… for more details – Grouty