title: How to render hasMany relationship data?
body: <p>How can I get the following example code to render not just the person data but also the phone numbers of that person when rendering the URL /#/persons/1. I try to loop though the phone numbers with <code>{{#each phoneNumber in phoneNumbers}}</code> but there has to be a fundamental understanding error on my side.</p>
  
  <p>Right now I only get:</p>
  
  <p><img src="https://i.stack.imgur.com/dLoR7.png" alt="enter image description here"></p>
  
  <p>app.js</p>
  
  <pre><code>App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    rootElement: '#container'
  });
  
  // Router
  App.Router.map(function() {
    this.resource('persons', function() {
      this.resource('person', { path: ':person_id' });
    });
    this.resource('phoneNumbers', function() {
      this.resource('phoneNumber', { path: ':phone_number_id' });
    });
  });
  
  App.PersonsRoute = Ember.Route.extend({
    model: function() {
      return App.Person.find();
    }
  });
  
  App.PhoneNumbersRoute = Ember.Route.extend({
    model: function() {
      return App.PhoneNumber.find();
    }
  });
  
  // Models
  App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.FixtureAdapter'
  });
  
  App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    phoneNumbers: DS.hasMany('App.PhoneNumber')
  });
  
  App.PhoneNumber = DS.Model.extend({
    number:  DS.attr('string'),
    person: DS.belongsTo('App.Person')
  });
  
  App.Person.FIXTURES = [{
    id: 1,
    firstName: 'X',
    lastName: 'Smith'
  }, {
    id: 2,
    firstName: 'Y',
    lastName: 'Smith'
  }];
  
  App.PhoneNumber.FIXTURES = [{
    id: 1,
    person_id: 1,
    number: '20'
  }, {
    id: 2,
    person_id: 1,
    number: '23'
  }, {
    id: 3,
    person_id: 2,
    number: '42'
  }];
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Phone book&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='container'&gt;&lt;/div&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="application"&gt;
        {{outlet}}
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="persons"&gt;
        &lt;p&gt;All people:&lt;/p&gt;
        &lt;ul&gt;
          {{#each controller}}
            &lt;li&gt;{{firstName}} {{lastName}}&lt;/li&gt;
          {{/each}}
        &lt;/ul&gt;
        {{outlet}}
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="person"&gt;
        &lt;h1&gt;{{firstName}} {{lastName}}&lt;/h1&gt;
        {{#if phoneNumbers.length}}
          &lt;ul&gt;
            {{#each phoneNumber in phoneNumbers}}
              &lt;li&gt;{{phoneNumber.number}}&lt;/li&gt;
            {{/each}}
          &lt;/ul&gt;
        {{/if}}
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="phone_numbers"&gt;
        &lt;ul&gt;
          {{#each controller}}
            &lt;li&gt;{{number}}&lt;/li&gt;
          {{/each}}
        &lt;/ul&gt;
        {{outlet}}
      &lt;/script&gt;
  
      &lt;script type="text/x-handlebars" data-template-name="phone_number"&gt;
        &lt;h1&gt;{{number}}&lt;/h1&gt;
      &lt;/script&gt;    
  
    &lt;/body&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/handlebars.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/ember.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/ember-data.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>