Displaying multiple panes for a route


#1

I was hoping to get some advice on displaying a template for a route which needs to have either a tabbed interface or a multiple paned interface to break up the content.

I’ve seen many ways of achieving this however not sure what is considered the best way in ember of achieving the result.

I’ve got a router

Rvr.Router.map(function() {
  this.resource('requests');
  this.resource('request', { path: '/requests/:request_id' });
});

Basically I’ve got a route/controller/template for requests that displays an array of requests in a table view and on each row is a link-to helper that links to the the individual request. That all works peachy however in the individual request there is a lot of data to display from the individual request model and I’d like to break that into various sections like “Project details”, “Research types”, “Investigators” using something like a tabbed interface e.g. http://getbootstrap.com/javascript/#tabs or a master detail arrangement using those same sections but the one model.

How do people break up the template into various sub sections that’s shown/hidden depending on a tabbed/pilled/master interface?

I know I can’t use the tabs.js and need to handle the behaviour in ember which I’m fine with I’m just not sure what the best way to do this. I know I should be using urls as much as possible so I can have state. I’ve seen examples that don’t use the router however this seems like it’s trying to break out of how ember is supposed to work.

Should I be nesting routes inside the request resource?

Rvr.Router.map(function() {
  this.resource('requests');
  this.resource('request', { path: '/requests/:request_id' }, function () {
    this.route('projectDetails');
    this.route('researchTypes');
    this.route('investigators');
  });
});

According to the guides I’m only supposed to use routes for adjectives or verbs and what I’m describing are nouns. Should they be resources not routes? But I’m wanting to just use the request model and I don’t have a projectDetails model etc. Do routes and nested resources have access to the parents model?

Sorry if this is really obvious. I’m still pretty new to Ember and probably making lots of mistakes. Also, this maybe a pattern that I need to use elsewhere so I’m wondering if I should be developing something like a component that I can use elsewhere.

Any advice would be greatly appreciated.


#2

There are a lot of ways you could structure your code for that. Personally I just use actions and css to hide or switch whats visible on the page and don’t try to map a subsection like that to the route (but that’s just me, I am by no means an ember expert). Another option would be to use a Container View: http://emberjs.com/api/classes/Ember.ContainerView.html This would allow you to have a view for each section and the container view would manage which was visible.


#3

Hi Eric. Thank you very much for your advice. I appreciate it.

Ok, that’s clarified it for me. I think the fact that Ember gives you many ways of doing things has kind of baffled me. I’m getting used to it now and enjoying the freedom. I think I was getting to obsessed with making all aspects of the application use the router so to have the state saved for every avenue. I guess I can come back and do that later if I really want but for now I’ll just show/hide content based on actions.

I’ll definitely play with Ember.ContainerView. It looks good. I completely didn’t notice it in the API docs. Thanks for bringing that to my attention.

I’ve got something going at the moment with bootstrap-for-ember addon. It’s a little overkill for what I want but it’s working. I’ll have a play with Ember.ContainerView and look to swapping it in for bootstrap-for-ember.

Thanks again.


#4

I thought of a way that you might be able to use container view for tabbed content and persist the tab state via routes. But this is pure conjecture, I haven’t tried this approach. You could make a nested route like the one you have, then in each of the sub route classes (ex App.RequestProjectDetailsRoute), use the setupController hook to set a property, such as ‘activeTab’ on the controller indicating which tab is active. Then tie the ContainerView’s active tab into that controller property. I definitely haven’t tried this, so it might not work like that, but its a thought.


#5

That sounds good. Conceptually I get how that could work. I definitely give that a go. It’ll be a good way to get into the depths of Ember. Thank you for your suggestion Eric.

Cheers, Michael