Combine routes without clearing other outlets?

1

Hi guys,

I have a question regarding combined routes and multiple outlets displaying html.

The page layout is like this: outlet-left | main menu | outlet-right

Main menu contains buttons that route to different pages in outlet-right, but it also contains a button that displays a list of users in outlet-left which should be accessible at any given moment.

Showing content in the outlet-right works, and showing the list of users in the outlet-left also works. When rendering to either outlet, the content in the other outlet is cleared because I’m routing to that specific controller.

What I need is a way to have my content in the outlet-left displayed/hidden whenever I want, without any impact on the outlet-right.

I’ve tried adding extra routes (someItem/users), that renders content to both left and right outlets, but since the users in the left outlet should be accessible everywhere, this solution would mean that I have to override all routes with custom renderers. My question is whether this is the way to go, or is there a cleaner solution?

I’m using Ember 2.3.0-beta.1

Thanks! Eric

2

Instead of using outlets, can you just insert components instead? Or do these outlets need to be dynamic based on the current route?

3

Hi Matheos,

Thanks for your answer, I’m currently trying out your suggestion. Here’s what I have so far; import Ember from ‘ember’;

Ember.Application.ToggleContentDrawer = Ember.Component.extend({
  value: false,
  actions: {
    toggle() {
      this.toggleProperty('value');
    },
    add: function () {
      Ember.Application.ContentDrawer.create();//.appendTo($('#theview'));
      alert('content drawer created');
    }
  }
});

export default Ember.Application.ToggleContentDrawer;

The contentDrawer seems to be created, but I’m having trouble actually adding the template of this component to the DOM. The appendTo function seems to be gone in Ember 2.3.0 and I was hoping that you could point me in the right direction? My browser gives me the following error; You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead. In the API docs, this class is Deprecated, so I’m worried that my application will break in a future upgrade when I start using containerViews.

Thanks :slight_smile: