Nested UI, Routes and Resources: Pro and Con

Design
1

TL;DR;

Attempting to create a long running thread about nested routing and all the related issues with this in ember. Want to collect all the relevant info in one place and hopefully produce an in-depth guide on the topic, after I can separate bugs from expected behavior, and undefined behaviors.

I started learning Ember JS and I took the following quote to heart:

“If your user interface is nested, your routes should be nested” – Yehuda Katz

Well this has been very frustrating in practice. After reading the guides and numerous blogs and stack overflow questions and trying to understand the latest router changes, my understanding seems more muddled than ever. I am not willing to drop ember, but I thought I could start this thread to consolidate ideas on the topic of nested UI design from both a practical and theoretical perspective. Perhaps others reading this thread will find some of the answers (and non-answers) quicker than I did.

It seems there is definitely something limited in the way resources and nesting work within ember or else there are conventions and reasonable design decisions that are not as obvious as they could be. To that end I would like to explore why that is in this thread. And also use this thread to provide links to practical examples of nested UI and idiomatic ember (jsBin etc).

I plan to come back to this thread as I can to post useful links and references. I would encourage others to do the same.

Related threads:

Querystring Support in Ember

A related topic especially when a UI design requires deeply nested and dynamic segments in router structure.

Examples:

A naive approach to nesting that doesn’t work but not sure why

Questions:

To what extent does ember js support deeply nested UIs and what are some explicit design decisions in ember that may limit how deeply one can nest resources in the router and UI?

PS: If it seems like I am spamming the forum, that is not my intention. I would like to use this thread to gather together bunch of information and perhaps then take a stab at writing an official guide on the topic once I cement enough knowledge in my mind.

More Questions

What is general meaning of this error and what specific causes it to arise?

Uncaught Error: More context objects were passed than there are dynamic segments for the route:

2 Likes
2

I’ll have a fuller response shortly, but you are in no way spamming the forum :slight_smile: This seems quite constructive.

3

More naive nesting code…

Why does this JS Bin raise an error when navigating to the route

solutions.show

http://jsbin.com/ucixor/1

Uncaught Error: More context objects were passed than there are dynamic segments for the route: solutions.show

Trying to make solutions.show an analogue for solution.index neither yet seem to load model.

Feel free to post a fixed jsbin in reply.

4

Even more naive nested routing…

http://emberjs.com/guides/routing/generated-objects/#toc_generated-controllers

If you navigate to route posts, Ember.js looks for a controller called App.PostsController. If you did not define it, one will be generated for you.

Ember.js can generate three types of controllers: Ember.ObjectController, Ember.ArrayController, and Ember.Controller.

But this naive example seems to contradict that.

When I navigate into the specific post.index route

Assertion failed: The value that #each loops over must be an Array. You passed <(generated post.index controller):ember370> ember-latest.js:364

Uncaught TypeError: Object [object Object] has no method ‘addArrayObserver’

Model in posts.index loads but not in post.index

not sure why…

In these examples I am trying to make a functional example with the minimal code required. Let Ember JS generated controllers do their thing. Feel free to post fixed JSBin in reply.

5

I’m not expert on EmberJS, but here’s my take (based on your example) on this topic. Hope I’m doing it right.

http://jsbin.com/ibotiz/2/edit

3 Likes
6

Very nice! Thanks for this example. Making it much more clear.

this.modelFor(‘post’);

Was what I was looking for. I guess I assumed too much with the generated controllers and assumed that the models were automatically loaded by convention.

7

That’s great! I haven’t seen modelFor used anywhere yet, and this kind of clears up some ambiguity I was having about nested routes… I would love to see like a tutorial based on nested routes and conventions that can be utilized.

8

Another related github issue around nested routes. Adding here for posterity

https://github.com/emberjs/ember.js/issues/2842#issuecomment-20224957

Related to this example of attempting a deeply nested structure in ember JS trying to emulate taxonomic rank in the UI.

9

A JSBin example I created to demonstrate nesting and non nesting

http://jsbin.com/AYoganE/2/edit

http://jsbin.com/AYoganE/2