how to keep the other outlet when transitioning to another route into named-outlet

Question

I have routes such that,

Router.map(function() {
  this.resource('board', { path: '/boards/:board_id' }, function() {
    this.route('calendar');
    this.route('attachments');

    this.resource('card', { path: '/cards/:card_id' });
  });
});

and the board template has two outlets, one is the default, and the other is named outlet.

/templates/board.hbs

<div id="master-content">
  {{outlet}}
</div>
<div id="detail-content">
  {{outlet 'detail'}}
</div>

/routes/card.js

App.Card = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render('card', { outlet: 'detail', controller: controller, into: 'board' });
  }
});

When I transition to board.index or board.calendar or board.attachments, their templates will be displayed in the default outlet and I want to display the card template into the outlet named 'detail'.

Here I have a question. Based on how Ember works in general, when I move to card route, the card template will be into detail outlet, but the other default outlet will become empty. I'd like to keep the default outlet as it was when I move to the card route.

My first approach is to have a controller that stores the information of what was in the default outlet and render them again whenever I move to card route.

Any best practices about this situations?

edpaez edpaez · Accepted Answer · 2014-01-21T15:30:21

I personally have never used Query Parameters in Ember (They're still in experimental and available in canary builds) but I believe they are a good fit for you.

http://emberjs.com/guides/routing/query-params/

You can use the full transition in the route (here) to have the templates rendered according to the values from query parameters.

App.CardRoute = Ember.Route.extend({

    model: function(params) {
        this.set('calendar', params.calendar); //assuming calendar it's the name of your query param
        this.set('attachements', params.attachements); //assuming calendar it's the name of your query param
    },

    renderTemplate: function(controller, model) {
        this.render('card', { outlet: 'detail', controller: controller, into: 'board' });
        if (this.get('calendar')) {
            this.render('calendar', { controller: 'calendar', into: 'board' });
        } else if (this.get('attachements')) {
            this.render('attachements', { controller: 'attachements', into: 'board' });
        }
    },

    actions: {
      queryParamsDidChange: function() {
        // This is how we opt-in to
        // a full-on transition that'll
        // refire the `model` hook and 
        // give us a chance to reload data
        // from the server.
        this.refresh();
      }
    }
});

Your other option would be to have the card resource as a subroute of both calendar and attachments routes.

I hope this helps you!

how to keep the other outlet when transitioning to another route into named-outlet

1 Answers