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

Answer 2

I solved my question with the help from @Edu. query-params were the way to go. The urls are not exact as the ones I specified above. They are like

/#/?frame1
/#/?frame2
/#/?frame1&frame2
/#/?frame2&frame1

This is fine as I just want to be able to share the view state of an application via the URL. Here is the demo link

Here's the code

Javascript

Ember.FEATURES["query-params"] = true;
var App = Ember.Application.create();

App.Router.map(function() {
  this.route('app', { path: "/", queryParams: ['frame1', 'frame2'] });
});

App.AppRoute = Ember.Route.extend({
  renderTemplate: function(controller, context, queryParams) {
      if(queryParams.frame1) {
          this.render('frame1', { outlet: 'frame1' });
      }
      if(queryParams.frame2) {
          this.render('frame2', { outlet: 'frame2' });
      }
  }
});

LinkTo Helpers

{{#linkTo "app" frame1=true}}Frame 1{{/linkTo}}
{{#linkTo "app" frame2=true}}Frame 2{{/linkTo}}