# Tabbed UI with Routing **URL:** \ **Category:** Uncategorized\ **Created:** [February 17, 2015, 8:59am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336 "2015-02-17T08:59:28Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Armin\_Zia](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/armin_zia/32/10158_2.png) [@Armin\_Zia](https://discuss.emberjs.com/u/Armin_Zia)\ **Post date:** [February 17, 2015, 8:59am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/1 "2015-02-17T08:59:28Z")
I’ve been using Ember.js in production for 2 months now. One of my requirements is to design a tabbed user interface with **twitter bootstrap v3**. when you want to redirect to a new route, a new **Tab Item** should be rendered in the main outlet. of course, each tab pane will have its own _controller/view/template etc._ objects. 1. What is the best way to implement this design? I’ve spent some time browsing the web on the subject but haven’t been able to find any useful information, yet. 2. How do I do garbage collection? suppose we’ve implemented a solution and routes are being dynamically rendered into a Tab Panel. when i close a tab pane, what happens to its controller/view etc. objects? do i have to dispose them and if so, how. Thanks in advance 💭 ---
**Author:** ![lfridael](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@lfridael](https://discuss.emberjs.com/u/lfridael)\ **Post date:** [February 17, 2015, 9:52am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/2 "2015-02-17T09:52:56Z")
Simple example that shows the basics of how you might go about implementing this. [https://github.com/lfridael/ember-tab-example](https://github.com/lfridael/ember-tab-example) Non-singleton controllers (i.e. item controllers within array controllers) and views are disposed of automatically when they are no longer needed. Singleton controllers are long-lived objects that stay in memory (i.e. in the DI container). ---
**Author:** ![Armin\_Zia](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/armin_zia/32/10158_2.png) [@Armin\_Zia](https://discuss.emberjs.com/u/Armin_Zia)\ **Post date:** [February 17, 2015, 10:32am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/3 "2015-02-17T10:32:58Z")
Hi, thanks for your answer. I cloned your repository and gave it a try. I’m not sure if this is what I’m looking for. You have an array in your **application controller** which holds the tab collection. you’ve defined a route in which you extract the selected tab’s ID and then render the appropriate template. What i need is different. say we have a _navbar_ with links to our application routes. the user clicks on the _Messages_ menu item which is linked to the **/#/messages/** route. the route object is executed (_App.MessagesRoute_) and at this point i need to add a new Tab Item to my tab control and render the corresponding controller/template/view. I hope I’ve explained my requirement well. perhaps I could incorporate your sample app and achieve my desired result, am I missing something here? Thanks again ---
**Author:** ![lfridael](https://avatars.discourse-cdn.com/v4/letter/l/7c8e57/32.png) [@lfridael](https://discuss.emberjs.com/u/lfridael)\ **Post date:** [February 17, 2015, 11:49am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/4 "2015-02-17T11:49:04Z")
Updated the example, the tabs are now dynamic. Of course this merely illustrates one possible approach. You’ll have to adapt it to your application. ---
**Author:** ![atsjj](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/atsjj/32/14817_2.png) [@atsjj](https://discuss.emberjs.com/u/atsjj)\ **Post date:** [February 18, 2015, 1:41am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/5 "2015-02-18T01:41:18Z")
I have approached this same issue and solved it by using different routes for each tab and just _faking_ the TWBS tabs. Basically, I markup the tabs the way the TWBS CSS expects and make one active based on the route. I never bother to initialize the JS, because I don’t need it. Ember already provides itself as a mechanism for swapping content in-and-out based on the URL; the TWBS tabbing JS is redundant. ---
**Author:** ![Armin\_Zia](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/armin_zia/32/10158_2.png) [@Armin\_Zia](https://discuss.emberjs.com/u/Armin_Zia)\ **Post date:** [February 18, 2015, 6:30am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/6 "2015-02-18T06:30:26Z")
Hi lfridael, thank you for your example, but I’m still confused on how to implement my use-case. I’ll write about the problem below this topic. ---
**Author:** ![Armin\_Zia](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/armin_zia/32/10158_2.png) [@Armin\_Zia](https://discuss.emberjs.com/u/Armin_Zia)\ **Post date:** [February 18, 2015, 6:40am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/7 "2015-02-18T06:40:33Z")
Hi atsjj. the problem is that if i use **outlets** to render my templates then only one template can be visible at a time. but i need to render each route separately and keep them open until closed by the user. suppose we have the following routes: - Home - Profile - Messages When you go to the **Profile route** the route object will be executed, you’ll resolve your model(s) and setup the controller etc. then render the template. if i include an outlet in my tab panel markup (the **tab-content** div) then switching between routes will invalidate the contents of this outlet. but i need to keep the rendered content in the DOM. Is this even possible in Ember.js? visiting each route should add a new item to the Tab Items and render its content in the tab-content div, how can i achieve this in Ember? I hope I’ve explained my scenario clearly. Thanks ---
**Author:** ![atsjj](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/atsjj/32/14817_2.png) [@atsjj](https://discuss.emberjs.com/u/atsjj)\ **Post date:** [February 18, 2015, 4:10pm UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/8 "2015-02-18T16:10:35Z")
I’ve done this in a _very_ hacky way before, where I override the `renderTemplate` method in my route and manually wire up my templates to some named outlets with some already resolved model data. The blessed way to do this kind of thing in Ember is with nested resources. I’m not sure I’m going to be able to solve this one, but I sure am interested! ---
**Author:** ![inexuscore](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/inexuscore/32/10191_2.png) [@inexuscore](https://discuss.emberjs.com/u/inexuscore)\ **Post date:** [February 19, 2015, 6:05am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/9 "2015-02-19T06:05:19Z")
Hey @atsjj I’ve implemented a sample and everything’s working the way i expect. I’ll post the complete code here. It’s probably a better idea to create a demo repo on GitHub, I’m on it. stay tuned! ☕ ---
**Author:** ![inexuscore](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/inexuscore/32/10191_2.png) [@inexuscore](https://discuss.emberjs.com/u/inexuscore)\ **Post date:** [February 21, 2015, 6:39am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/10 "2015-02-21T06:39:31Z")
Hey guys, I’ve created a [demo repo on GitHub](https://github.com/inexuscore/ember-tabbed-ui). The code is self explanatory but if you needed any help please let me know. Currently the Tabbed UI works fine, you can load modules dynamically with their own context (controller, view etc.) and you can close open tabs which disposes related objects automatically.@atsjj @lfridael There’s a problem in this sample project and I would really appreciate it if you guys could give it a try and help me out. The problem is the fact that controller properties return **null** after the views have been rendered. I’m assuming this is caused by the **render-module** helper since it observes **.on(“init”)**. Thanks, I’m waiting to hear from you guys 💬 ---
**Author:** ![inexuscore](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/inexuscore/32/10191_2.png) [@inexuscore](https://discuss.emberjs.com/u/inexuscore)\ **Post date:** [February 21, 2015, 8:50am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/11 "2015-02-21T08:50:25Z")
**Note:** this current implementation works fine except the fact that controllers don’t get instantiated properly. this is because the **render-module** helper passes a model to the **{{render}}** helper since you can only call the {{render}} helper once without a model, hence the **setupController** hook won’t work. I fixed this issue by taking the following steps: - Remove the _#each_ loop in **application.hbs** where we call the _render-module_ helper and instead introduce a named outlet (i.e. **{{outlet “tab-content”}}** ) - Update your view classes and add the necessary attributes like _role=tabpanel_ etc. - Update your route objects and override the **renderTemplate** hook, specifying the _tab-content_ outlet as the container. Now everything would work as you expect. each route will be rendered inside the **tab-content** section of your bs-tabpanel and the context is properly set up (controller, view etc.) but the catch is that, only one template will be rendered into this outlet at a time. Its no biggy and actually its a better design because the DOM would be much more lightweight. but i wanted to keep my rendered views in the DOM, just like the implementation that I’ve uploaded to the demo repo **ember-tabbed-ui**. If anyone could help me out figure a way to properly initialize my controller in that sample It’d be great! ---
**Author:** ![inexuscore](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/inexuscore/32/10191_2.png) [@inexuscore](https://discuss.emberjs.com/u/inexuscore)\ **Post date:** [February 23, 2015, 10:18am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/12 "2015-02-23T10:18:01Z")
I’m actually a little surprised that this topic got little attention over the past few days. anyone able to help here ❓ ---
**Author:** ![atsjj](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/atsjj/32/14817_2.png) [@atsjj](https://discuss.emberjs.com/u/atsjj)\ **Post date:** [March 3, 2015, 4:43am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/13 "2015-03-03T04:43:58Z")
I’m sorry to have neglected this for so long, but this is on my list. Will update again soon! ---
**Author:** ![inexuscore](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/inexuscore/32/10191_2.png) [@inexuscore](https://discuss.emberjs.com/u/inexuscore)\ **Post date:** [March 3, 2015, 9:24pm UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/14 "2015-03-03T21:24:10Z")
Hey @atsjj It’s alright I came up with a solution and its been working really well for the past several weeks. In my current implementation, only one template can be rendered and kept alive in the DOM. you get route transitions when you switch between the tabs, and if a route has been loaded before the model hook is skipped. It works just fine, but only one template can be rendered a time and kept in the DOM. I’m still looking for a good design to come up with a modular application. in which you can render different components in different parts of the page, whenever you need to, and keep them alive in the DOM, with their model and context properly initialized and set up. I’ll definitely update this post when i resolve this challenge! P.S I’ll update my github repo in a day or two with my current implementation. its still pretty good. If it gets developed into a plugin for ember and ember-cli, even better! ---
**Author:** ![aamirrajpoot](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/aamirrajpoot/32/10720_2.png) [@aamirrajpoot](https://discuss.emberjs.com/u/aamirrajpoot)\ **Post date:** [June 8, 2015, 5:22am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/15 "2015-06-08T05:22:06Z")
Bump +1 I am also looking for dynamic link+tabbed interface. My application is admin controller and admin can assign links to each users so my links will be loaded from database. And each link will open its own tab ---
**Author:** ![novascape](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@novascape](https://discuss.emberjs.com/u/novascape)\ **Post date:** [August 7, 2015, 4:52am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/16 "2015-08-07T04:52:40Z")
Bump +1 - this would be a really good starter-kit, especially when implemented using all the Ember 2.0 guidelines. ---
**Author:** ![ptgamr](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ptgamr/32/11047_2.png) [@ptgamr](https://discuss.emberjs.com/u/ptgamr)\ **Post date:** [October 15, 2015, 1:09am UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/17 "2015-10-15T01:09:20Z")
I also have this requirement in our project. Here is my approach to solve it: (using bootstrap for markup) - a `nav-pills` for tabs display - put the `{{outlet}}` inside `tab-content .tab-panel.active` ```auto
    {{#each model.categories as |category|}} {{#link-to 'shops.show.category' category tagName="li"}} {{category.name}} {{/link-to}} {{/each}}
{{outlet}}
``` Here is how it looks: [![](https://i.imgur.com/BoWwytX.gif) ](https://i.imgur.com/BoWwytX.gif) Here is the repo for it > **[GitHub - ptgamr/ember-nested-route: An ember demo app for nested route](https://github.com/ptgamr/ember-nested-route)** > > An ember demo app for nested route. Contribute to ptgamr/ember-nested-route development by creating an account on GitHub. ---
**Author:** ![vitasiku](https://avatars.discourse-cdn.com/v4/letter/v/3d9bf3/32.png) [@vitasiku](https://discuss.emberjs.com/u/vitasiku)\ **Post date:** [April 16, 2016, 6:48pm UTC](https://discuss.emberjs.com/t/tabbed-ui-with-routing/7336/18 "2016-04-16T18:48:35Z")
I have really liked the example you have implemented. I am going to use the concepts for a tabbed UI instead of nav-pills. Thanks for sharing