Dynamic Tabbed Interface


I am trying to create a dynamic tabbed Interface. I saw Supporting multiple simultaneous "screens" in dynamic Tabs inside one Ember application

So far, I am able to create dynamic tabs. When a link with openTab=true is clicked it opens a tab.

In order to do that. I have created a Service which handles the tabs, A component which renders the tab in the application and a Link openers which opens the Ember.LinkComponent and customize the click events.

The code can be found here https://github.com/aalasolutions/ember-tabbed-interface and demo on http://aalasolutions.com/ember/tab/

If a tab is opened, and a link inside that tab is not marked to open the tab, it will change the tab title and also update the route. So next time when some one opens that tab. It will take user to proper route.

I am having following problems right now

  1. If a link have openTab, I have used ‘Title’ to use in the tabs. I want it to be dynamic so any yield content like {{#link-to route}}YIELD{{/link-to}} can be used as tab title
  2. route.transitionTo('route') will change the route in history, but tab title and tab events are not updated. I tried to customized the Route by reopening it but it didnt worked for me.
  3. Any items filled in the forms are lost.

If I am able to fix these issues. I would like to make this a an addon so any one can use it.


I have been updating my code on git with my progress,I have created a service to store the dirty models. For new models. that service is working fine.

But for existing records. If I am coming from list page, my model function never get called in the router. In result it didnt load the model from my service.

If instead of passing the object in the list page I pass the ID then model function get called. and I can store a dirty model in service. But due to nature of Data Model Object, when I rollback the Model (when switching tab, i dont want users to see unsaved, edited, dirty content) it also roll back the model inside my service.

So I am stuck again