There is a main page, whose child route has some posts, whose template is displayed in the outlet of parent.
I get that:
On the application route, you display parent template with its controller.
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.
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:
Forum
Profile
Posts section
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.
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.
@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ā¦
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.
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.
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.
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
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?