Ember Component loads store data
<p>Which life cycle do you think is the most appropriate place to load <code>store</code> data in <code>Ember.Component</code>? </p>

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

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

<p>I get a a list of authors, and a list of publishers.</p>

<p>Codes:</p>

<pre><code>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')
    });
  }
})
</code></pre>

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

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

<p><strong>Update:</strong></p>

<p>This issues can be solved by putting the loading logics in the following 3 ways:</p>

<ol>
<li><p>In <code>setupController</code> inside <code>route</code>.</p></li>
<li><p>In <code>model()</code> hook of <code>route</code></p></li>
<li><p>In component life cycle.</p></li>
</ol>

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