Route handling multiple complex components

[ef4]

For your use case, I think it makes sense to load data from the components, but I would suggest making the data loading functions into ember-concurrency tasks. Otherwise there are many concurrency bugs you’d have to solve manually. For example, the loading() method above:

1. Is not cancelled if the component is torn down before the query finishes, which will result in an exception when set('isLoading', false) tries to run on a destroyed component.
2. Allows multiple queries to race each other, if the input parameters change while a query is still running. The newest query doesn’t necessarily win, the fastest wins, and that could show inconsistent results.
3. Gets stuck forever in the loading state if the query encounters a network error.

More detail on the general question of when and how to load data in the router vs components is here: This is relevant to your question:

Readers' Questions - "Is it bad to load data in components?"

Hello once again to Readers’ Questions, presented by the Ember.js Times. Today I’m answering this question by jj: Is it still considered an anti-pattern to handle lots of data loading in the scope of Components? In general, it’s not an anti-pattern to load data in a component. But there are two common ways people go wrong by loading data in components: They load data in a component when the router could have easily done it for them (thus spending effort and increasing complexity for no be…

Finally, I will point out that there’s no need to do this:

this.get('loading')(this)

You can invoke your own methods normally on Ember Component:

this.loading().

(Or use a Glimmer Component, which doesn’t extends from Ember.Object at all and has none of the special get, set, extend stuff that is causing this confusion.)