Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A solution to build an emberjs application around two panes, each one having multiple tabs.
<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>
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']
});

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment