Ember.js Router application architecture - how to have multiple nested pairs of views / controllers

Question

I have an app for ember, and the concept of the outlet and connection of the outlet is beautiful, I understand. I don't understand how to have multiple views / controller views inside another without insane nesting

Suppose I am developing an icloud clone where I have email functionality and photo gallery functionality. Now, if I wanted to do something like

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

What I would like to design would be something like

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

Where can I swap them to the SplitView level or delete them alltogether, but I don’t see a good way to do this with only one outlet . This would make me follow things inside things that should not be nested. Using a single output approach, my structure will be more like

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

How do I find an architecture style that matches Ember.js / Router that still allows for more complex nesting?

Answer 1

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

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

etc.