Correct way to load multiple data sources?

1

I have a question about the correct way to structure an Ember application. So I have an application/edit/{id} route, my model currently looks like this:

  model(params) {
    return this.store.findRecord('app', params.application_id);
  }

On this application page I also want another section/view/component (I am not sure on the correct ember term) which will display some other data from the API - for example api/application/{id}/foo Would this be the correct way to do it:

  model(params) {
    return RSVP.hash({
      'application': this.store.findRecord('app', params.application_id),
      'foo': this.store.findRecord('foo', params.application_id),
    });
  }

And then in the edit template I can create a component and just pass the data into this? Or is there a better way than just adding to the RSVP.hash object? What happens if I don’t want to block rendering waiting for all model hooks to complete?

I am correct in saying components loading data is bad practice?

2

No. a lot of the more seasoned Ember developers do it to get quicker UI loads. But it’s not something currently well documented …

3

Am I correct in that it is harder to test components that don’t follow the data down actions up principle?

4

Yes, I think it would be, as you’d be having to mock additional services that your component used to load data (instead of the component handling whatever data you give it)

5

I’ve been struggling with this as a lot of my routes need multiple lists retrieved. Only a few are simple enough that everything can be handled in a single AJAX call, and that’s what all the EmberJS Guide seems to be limited to.

It looks like Components would be a good way to deal with this as they have all sorts of initialization and refresh methods where you can retrieve data from the server in isolation and asynchronously, and they can be reused across multiple routes. Although there are many good articles on Components in the Guide I am still struggling to understand exactly how to use them properly in a best practices way.

I looked into using Controllers (mainly because I’m coming over from Angular and that seemed like a familiar concept) but I’ve seen a few references to Controllers going away in future in favor of Components.

Speaking of the future, it looks like JSON API has complex calls coming in V1.1, and I’m hoping that Ember Data will support this asap. From JSON:API — About under Roadmap:

Embedding / creating multiple related resources in a single request