Multiple outlets with different models in application route

1

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
    this.render();

    // 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.

2

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.