Nested routing and/or query parameters for multiple outlets


#1

With all the updates in ember and ember-cli that are happening right now, I’m trying to figure out the best way to do something along the lines of ‘simultaneous routing’ into multiple active outlets.

Essentially, I want to have a route something like:

Router.map(function() {
  this.route('item', {path: 'item/:item_id'}, function() {
    this.route('section', {path: 'section/:section_id'}, function() {
      this.route('contentType1');
      this.route('contentType2');
      this.route('contentType3');
    });
  });
});

Where the model returned by the ‘section’ route would be rendered in the main application outlet, and the ‘contentTypeX’ routes would render their returned content in some other outlet like a sidebar.

Now, this seems to work for the most part, but transitioning between sectionIds drops the ‘contentTypeX’ state from the URL, and the router automatically closes that outlet. (i.e. something like {{#link-to ‘section’ 3}} would close contentType1 even though I only want to change the section)

I believe the alternative might be to use queryParams, as they are ‘sticky’ between transitions, but the ‘routable components’ of ember 2.0 seem like a much more intuitive approach, and I’d like to keep data retrieval inside the route whenever possible since controllers are going to be deprecated as well. So I guess at this point I’m wondering if there’s a way to make nested routes ‘sticky’, or if there’s a better setup for the router map, or some sort of router hook that I can check the URL and force the nested route to stay in URL.