Showing multiple frames with the router in EmberJS

Question

I just started learning EmberJS and still figuring out standard ways of doing things.

I want to know if something like the above image is possible in EmberJS. I have a page that has 2 frames that are hidden initially.

If the the button for frame 1 or frame 2 is click, the corresponding frame is shown. This can be done by using click handlers and css show/hide.

I would like to handle it using the routes. So If I only have frame 2 opened and share the link, the other user sees the same thing. Same thing for 2 frames.

Here are the different routes I'm try to get

/  (Picture 1)
/frame1 (Picture 2)
/frame2 (Picture 3)
/frame1/frame2  or /frame2/frame1 (Picture 4)

I know how to get the first 3 pictures. But the fourth one is tricky. I'm thinking of using 2 resource/route that matches the 2 combinations. But creating the link will also be difficult as I'm not sure if the normal linkTo helper will work.

So I really got 2 problems -

1. How to create the links for picture 4 in the template. Will I need to create a custom helper?
2. Show two frames open as picture 4 using routes.

Update 1 Here is a demo of what I got so far.

Update 2 In this updated version, I've gotten all the 4 url combinations to work. But the links will only go to /frame1 and /frame2. You will need to manually set the address in the bar to /frame1/frame2 or frame2/frame1 to see it work. I guess the 2 question is solved but need to find out the first question.

Answer 1

You could use query params https://github.com/emberjs/ember.js/pull/3182. Is a feature you should activate https://github.com/emberjs/ember.js/blob/master/FEATURES.md