We are new to Ember and have an ambitious requirement for an Ember 2.0 app: We need to support the concept of multiple open screens inside the application where each screen is opened from a navbar menu into a dynamic tab control on the home page.
An example of a screen might be to create a new Order where the user can create multiple new Orders simultaneously where each order will appear inside of a new tab. Those Orders can be edited separately and separately saved and processed or even closed (closing that particular Order screen/tab). A Client might also be opened inside of another tab for editing while editing an Order in another tab. Each screen will have it’s own Model instance.
We are trying to work out architecturally how to structure such an application:
- have a home controller and template that displays the navbar menu and dynamic screens tab control
- represent each “screen” as a component
- clicking a navbar menu item would dynamically add a tab to the tab control and display the relevant “screen” component inside of the tab-pane for the new tab
- load the model for each “screen” inside the didInsertElement() function of each screen component
The above sort of works but as we continue to build it out we are running into routing problems as each tab needs to be able to be bookmarked (e.g. link emailed to Order #1234 - clicking on such a link will open the app with a single tab displaying the required Order). Switching between the tabs should allow the browser back/forward button to be used to retrace the navigation.
Closing a tab by clicking the (x) button on the right corner of each tab should check whether the contained screen and model are dirty and display a warning message if so.
Looking for some architectural ideas / patterns on how best to do this in Ember 2.0 world. I realize our requirement is a bit advanced for new Ember enthusiasts, but that is a business requirement.
Thanks in advance