Having multiple child controllers in a parent controller

Design
1

I’m trying to implement an array controller that uses a list of games as its model. Now I I’d to like have two child controller to this array controller as well that each have their own model.

One is for sorting and the other is for filtering the list of games represented in the parent controller. They are both array controllers each back by their own models being a list of sorting options and a list of filtering options. Neither of these lists of options will be static which is why the user needs to add/remove options from either child controllers.

So while all three controllers ( parent and 2 children ) are backed by their own models, they all affect the list of games.

Can anybody steer me in the right direction for a pattern to accomplish this? As far as I know a controller can only have one child.

I also do not want the child controllers to affect the route. Every user will have their own list of filters and sorting options.

2

I haven’t tackled anything quite like this but it sounds like the {{render}} helper might be what you’re looking for? http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper

Your child controllers could use needs to reference the parent controller and then modify it’s queryParams properties as appropriate.

3

Another option is to use the {{#with}} helper and specify your controller='' there. This would allow you to keep your code in one template instead of rendering another (if that’s what your looking for). Ember - 4.6 - Ember API Documentation

1 Like
4

@Panman8201 that looks pretty damn useful, is it a new addition? I don’t remember seeing it before.

5

@opsb, I’m not sure what version it actually made it in (looks like maybe 1.4), but here is the Pull Request: https://github.com/emberjs/ember.js/pull/3722

Also, I think {{#each}} has the same thing with itemController=''. Might be more helpful when looping over a collection. Ember - 4.6 - Ember API Documentation

6

I’m familiar with the itemController option but {{with}} means that you can keep the markup for a component/view in a single template. I’ve got a few components that have several nested templates at the moment, it can make it harder to navigate around the project that it might be.