A solution to build an emberjs application around two panes, each one having multiple tabs.

emberjs-multiple-panes-multiple-tabs.html

<script type="text/x-handlebars" data-template-name="application">
  <h1>This is a sample app</h1>
  {{outlet leftPanel}}
  {{outlet rightPanel}}
</script>
 
<script type="text/x-handlebars" data-template-name="leftPanel">
    <a href="#lefttab1" {{action selectTab "leftPanelTab1"}}>Left pane tab 1</a>
    <a href="#lefttab2" {{action selectTab "leftPanelTab2"}}>Left pane tab 2</a>
    <div class="tab-container">{{outlet}}</div>
</script>
 
<script type="text/x-handlebars" data-template-name="leftPanelTab1">
Left Panel Tab1
</script>
 
<script type="text/x-handlebars" data-template-name="leftPanelTab2">
Left Panel Tab2
</script>
 
<script type="text/x-handlebars" data-template-name="rightPanel">
    <a href="#righttab1" {{action selectTab "rightPanelTab1"}}>Right pane tab 1</a>
    <a href="#righttab2" {{action selectTab "rightPanelTab2"}}>Right pane tab 2</a>
    <div class="tab-container">{{outlet}}</div>
</script>
 
<script type="text/x-handlebars" data-template-name="rightPanelTab1">
    Right Panel Tab1
</script>
 
<script type="text/x-handlebars" data-template-name="rightPanelTab2">
Right Panel Tab2
</script>

emberjs-multiple-panes-multiple-tabs.js

App = Ember.Application.create({});
 
App.Router.map(function() {
    this.resource('panels', { path: '/:leftTab/:rightTab' });
});
 
App.ApplicationRoute = Ember.Route.extend({
    events: {
        leftTabChanged: function(tab) {
            this.controllerFor('application').set('leftTab', tab);
            this.transitionTo('panels', {
                leftTab: tab,
                rightTab: this.controllerFor('application').get('rightTab')
            });
 
        },
        rightTabChanged: function(tab) {
            this.controllerFor('application').set('rightTab', tab);
            this.transitionTo('panels', {
                leftTab:this.controllerFor('application').get('leftTab'),
                rightTab:tab
            });
        }
    },
 
    renderTemplate: function() {
        this.render();
        this.render('leftPanel', {
            outlet: 'leftPanel',
            into: 'application'
        });
 
        this.render('rightPanel', {
            outlet: 'rightPanel',
            into: 'application'
        });
    }
});
 
App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('panels', {
            leftTab: this.controllerFor('application').get('leftTab'),
            rightTab: this.controllerFor('application').get('rightTab')
        });
    }
});
 
App.PanelsRoute = Ember.Route.extend({
    serialize: function(params, paramNames) {
        return params;
    },
    renderTemplate: function(controller, params) {
 
        this.render(params.leftTab, {
            into: 'leftPanel'
        });
 
 
        this.render(params.rightTab, {
            into: 'rightPanel'
        });
    }
});
 
App.ApplicationController = Ember.Controller.extend({
    leftTab: 'leftPanelTab1',
    rightTab: 'rightPanelTab1'
});
 
App.LeftPanelController = Ember.Controller.extend({
    selectTab: function(tab) {
        this.send('leftTabChanged', tab);
    }
});
 
App.LeftPanelView = Ember.View.extend({
    classNames: ['pane']
});
 
App.RightPanelController = Ember.Controller.extend({
    selectTab: function(tab) {
        this.send('rightTabChanged', tab);
    }
});
 
App.RightPanelView = Ember.View.extend({
    classNames: ['pane']
});

Emberjs-multiples-panes-multiple-tabs.md

Here is a solution to handle an application build around two panes, each one having multiple tabs.

The router is able to memorize the current tab selected in each pane:

• /leftTab1/rightTab1
• /leftTab1/rightTab2
• /leftTab2/rightTab3
• / ...

Here is the working associated fiddle: http://jsfiddle.net/obalais/L78yu/