Alan Dong Alan Dong - 27 days ago 13
Javascript Question

Ember Component loads store data

Which life cycle do you think is the most appropriate place to load

store
data in
Ember.Component
?

I’m loading data asynchronously. That’s why I’m not loading the real data from
route
, but its meta-data?

For example. I'm loading a list of books, thats based on Author's
name
, and a list of
publisher
. (This is just an illustration).

I get a a list of authors, and a list of publishers.

Codes:

import Ember from 'ember';

export default Ember.Route.extend({
model(params) {
return Ember.RSVP.hash({
authors: this.store.findAll('author'),
publishers: this.store.findAll('publisher')
});
}
})


After fetching
authors
and
publishers
from the
route
, now we can do another query, namely
this.store.find('book', {author, publisher})
to get a book.

I just wanted to ask to see which life cycle in Ember.Component is more appropriate to fetch such data asynchronously.

Update:

This issues can be solved by putting the loading logics in the following 3 ways:


  1. In
    setupController
    inside
    route
    .

  2. In
    model()
    hook of
    route

  3. In component life cycle.



After consideration (reading and discussing with colleagues), I think Component should be putting result, not the logics. See my answer below.

Answer

I was able to chain it.

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return Ember.RSVP.hash({
      m1s: this.store.findAll('meta1'),
      m2s: this.store.findAll('meta2')
    }).then( ({m1, m2}) => {

      let data = [];
      m1s.forEach( (m1) => {
        m2s.forEach( (m2) => {    
          this.store.query('modelName', {
              m1.get('id'),
              m2.get('id')
          });

        });

      });

    });
  }
}),

You might need to write your own adapter and serializer though.