Multiple outlets with different models in application route


I have a page that currently uses three outlets. Two of them are named and one is the default.

One of the named outlets is used to display a dynamic menu that comes from the server and the other is used to create modals.

My application route looks like that:

import Ember from 'ember';

export default Ember.Route.extend({

  renderTemplate: function() {
    // Render default outlet

    // render extra outlets
    this.render("left-menu", {
      outlet: "left-menu",
      into: "application",
      model: this.panel

  actions: {
    openModal: function(modalName, model) {
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal',
        model: model

    closeModal: function() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'

My problem is that when openModal get called and executes the model that “left-menu” outlet has gets wiped out and it shows nothing. Note that I want the menu on the left to always stay visible.

Could someone please help me understand why this happens and how to resolve it? Thanks in advance.


For anyone interested in a solution I managed to find one. Instead of having a different outlet I changes its content to a component.

Since the data from the menu are being fetched from an initializer I inject them in all components with a specific name. Thus the template for the menu component can refer to the data needed.