Ember parent route changes without child route changing

Question

On one Ember route, I have one side a list of records (foos) on the left, and on the other side a form. Usually, I'd route it like so: /foos/bar/1/edit. However, I also have a list of baz records, that can be displayed on the left, next to the form.

Ideally, I'd like to be able to have the user be able to alternate between the two lists on the left, while preserving the form on the right.

My first attempt to do this was to load both lists in the same route, and toggle them with a tab jQuery plugin. However, this poses several problems related to pagination and back button/refreshing.

I've also tried putting the lists in their own routes (i.e. /foos/bars/1/edit and /bazs/bars/1/edit). But I can't figure out how to link to a different list without losing the edit page.

Is there a better way to accomplish this?

Answer 1

I think the best way would be using the separate routes but instead of /foos/bars/1/edit and /bazs/bars/1/edit having the form in the main parent resource then foos and bazs as the sub resources. That way when you transition the routes for which list you want displayed it will changed the template that gets rendered in the outlet but maintaining the form.