title: Ember - How to link from parent route to child route when both have array controllers?
body: <p>I have the following setup. <em>Each account can have multiple profiles</em>.</p>
  
  <p>app.js:</p>
  
  <pre><code>App.Router.map(function () {
      this.resource("accounts", function () {
          this.resource("profiles", {path: "/:account_id"})
      })
  });
  
  App.Account = Ember.Object.extend({
      findAll: function () {
          // Ajax request to fetch data from the server
      }
  });
  
  App.AccountsRoute = Ember.Route.extend({
      model: function () {
          return App.Account.findAll();
      }
  });
  
  App.Profile = Ember.Object.extend({
      findAll: function () {
          // Ajax request to fetch data from the server
      }
  });
  
  App.ProfilesRoute = Ember.Route.extend({
      model: function () {
          return App.Profile.findAll();
      }
  });
  </code></pre>
  
  <p>accounts.hbs:</p>
  
  <pre><code>{{#each model}}
      {{#linkTo "profiles" tagName="li"}}
          {{accountName}}
      {{/linkTo}}
  {{/each}}
  {{outlet}}
  </code></pre>
  
  <p>profiles.hbs:</p>
  
  <pre><code>{{#each model}}
      {{profileName}}
  {{/each}}
  </code></pre>
  
  <p>However, this is not working. Whenever I click on one of the account names, nothing shows up in the outlet. And if I pass "this" in {{#linkTo "profiles" this tagName="li"}}, then I get an error message saying that Ember cannot loop through something that is not an Array. How would you go about linking from a parent route to a child route when they both have array controllers and the child template is displayed in the parent's outlet?</p>