How should I organize multiple controller/models in one application?

Design
1

This is a question I have about all MVC frameworks that I could not yet find a satisfactory answer. For example the main ember tutorial here: Ember.js Guides - Guides and Tutorials - Ember Guides

There is a main page, whose child route has some posts, whose template is displayed in the outlet of parent.

I get that:

  1. On the application route, you display parent template with its controller.
  2. On the posts route, you display parent, and child template using its controller

This is what I dont get: Do we have to have one parent-child relationship, and a single route to display it? How about multiple children objects on the same page? How about their children?

Whatif I have posts on the main page, a profile object, a forum groups object, an instant messaging object, etc. all on one page? With the given tutorials all I can do is either browse to a profile route, a posts route, or forum groups route, but canā€™t have all on the page, because they are not in a child/parent relationship and on the same route.

A tutorial or clarity on this would be much appreciated.

1 Like
2

I have an app where people can edit a particular object, which includes all its childrenā€¦

Itā€™s perfectly possible to do thatā€¦ itā€™s up to you if you want to encode all this info in the path of the URL, but I wouldnā€™t suggest itā€¦

If you want to have some kind of control panel, you need to ask yourself what state you want to encode on the URL. If you have a:

  1. Forum
  2. Profile
  3. Posts section
  4. something else

ā€¦ do you want the url to be something like: control_panel/form/1/profile/2/posts/5/something/8 ? thatā€™s a big URL. Do you want it to just be control_panel and then encode all the other optional ā€œselectionsā€ for the state of your constituent elements as query-params?

You also have to ask yourself about the kind of user experience you want to give your users. @nathanhammond 's recent emberconf talk might be a great watch hereā€¦ depending on the complexity of your requirements. You might also want to take a look at yehuda & tomā€™s keynote which talks about flows, tooā€¦ possibly first, because they talk about some large apps that encode a lot of state, and manage to split it up properly and nicely into URLs that make sense from the POV of the UI of their apps.

Check out the URL for these videos: http://www.confreaks.com/events/emberconf2014

3

If these are contstant parts of your page you can use Views (or Components?).

Route is mainly supposed to be a separate full-featured section of an application, as @JulianLeviston has already mentioned, in your situation I would rather have dashboardRoute with separate template that then links to to full postsRoute, profileRoute, groupsRoute, etcā€¦

For ā€˜instant messaging objectā€™ it would make sense to keep in on parent route, so it would be visible on all pages.

4

@bbalban I was thinkingā€¦ it might facilitate further discussion and understanding if you could possibly provide some kind of similar example of what youā€™re trying to achieveā€¦

5

So, funny @JulianLeviston ropes me into this, I actually solve this exact problem in my application. Visit EmberFlowsGenerator and then click the headers for each individual section. Ignoring the fact that Iā€™ve not properly handled the CSS, you get all of the things you might imagine wanting.

This is implemented using a combination of:

https://github.com/nathanhammond/ember-flows-generator/blob/master/app/templates/index.hbs

https://github.com/nathanhammond/ember-flows-generator/blob/master/app/router.js

In short, make each section responsible for itself, and then create a separate ā€œdashboardā€ route that coordinates their inclusion and manages their combined state. Itā€™s like having iframes but way better.

Disclaimer: Iā€™ve not yet started to try and pass models through to children with this solution, or handle child outlets without routing. The first shouldnā€™t be bad, you can pass {{render}} a model. The second layer will probably require a clever Ember plugin to change how outlets are populated. @machty knows where the bodies are buried in the router and I fully intend to try and snag some of his time to solve that problem at some point in the future.

To get rid of a typo I have to add something.

3 Likes
7

Thanks for all the good answers. I am going through emberwatch.com tutorials to learn more and came across this one: Ember Components: A Deep Dive

It shows you how to knit a UI element one inside another, in detail, and not exactly needing a 1-1 child-parent relationship. I thought initially components are like HTML helpers with not much potential for designing functionality, but from this tutorial it seems you can define components with well defined interfaces manipulating data and broadcasting actions.

The other benefit seems to be they are not tied to a controller. Maybe it makes sense to build up most of the UI with components, define all data input and actions needed, one by one, and then only after that introduce the complexity of MVC and design the route/controller/model relationship.

8

Another snippet of information on how to organize a page:

It suggests using CollectionView/ArrayController, namely lookupItemController, and createChildView. I wish there were more guides on how to use them instead of us digging information in these snippets of videos :wink:

9

I started using Ember-Cli and it enforces a nice structure. You may wanna check it out.

10

This topic has been dead for two years, but still very relevant. Is there any way we can get some of these best practices for complex UI design into the EmberJS guide?

That NBC News video also seems very interesting (still watching it and soaking up the info), but it mentions views which is something that I donā€™t see in the EmberJS guide any more. Are Views now just called Templates?

1 Like