How to load dependencies in Ember Data
<p>I have an application, with 2 models: Team and User. Each team has many users, and only 1 Team Leader. On the Index view for Teams, I want to display the list of Teams, and the name of the Team leader. I can't get the name of the team leader to be displayed. Not sure what's wrong.</p>

<p>User Model:</p>

<pre><code>export default Model.extend({
  firstName: attr(),
  lastName: attr(),
  team: belongsTo('team', { inverse: 'users' }),
  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  })
});
</code></pre>

<p>Team Model: </p>

<pre><code>export default Model.extend(Validations, {
  name: attr(),
  shortName: attr(),
  description: attr(),
  teamLeader: belongsTo('user', { inverse: null }),
  users: hasMany('user'),
  specialisationArea: attr(),
  sourceEnergyTeam: attr(),
  isEnergyTeam: Ember.computed('specialisationArea', function(){
    return this.get('specialisationArea') == 101;
  })
});
</code></pre>

<p>Team Index Route:</p>

<pre><code>export default Ember.Route.extend({
  model() {
    return this.store.findAll('team');
  }
});
</code></pre>

<p>Team List Template:</p>

<pre><code>  {{#each model as |team|}}
    &lt;tr&gt;
      &lt;td&gt;{{team.name}}&lt;/td&gt;
      &lt;td&gt;{{team.shortName}}&lt;/td&gt;
      &lt;td&gt;{{team.description}}&lt;/td&gt;
      &lt;td&gt;{{team.teamLeader.fullName }}&lt;/td&gt;
      &lt;td&gt;{{#link-to "teams.team" team}}Details{{/link-to}}&lt;/td&gt;
    &lt;/tr&gt;
  {{/each}}
</code></pre>

<p>And this is the mirage configuration:</p>

<pre><code>this.get('/teams', () =&gt; {
  return [{
    id : 11,
    type: 'team',
    name: 'Energy',
    description: 'energy desc',
    shortName: 'short',
    teamLeader: 12,
    users: [12],
    energyTeam: true
  }];
});

this.get('/teams/:team_id', () =&gt; {
  return {
    id: 11,
    type: 'team',
    name: 'energy',
    description: 'energy desc',
    shortName: 'eg',
    teamLeader: 12,
    users: [12],
    energyTeam: true
  };
});

this.get('/users', () =&gt; {
  return [{
    id: 12,
    type: 'user',
    firstName: 'Pedro',
    lastName: 'Alonso',
    team: 11
  }];
});
</code></pre>

<p>I'm not sure what's going wrong, but in the network calls I can see that only a call to '/teams' is being triggered. Any ideas?</p>

<p>Thanks</p>