Ember - How to link from parent route to child route when both have array controllers?

Question

I have the following setup. Each account can have multiple profiles.

app.js:

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();
    }
});

accounts.hbs:

{{#each model}}
    {{#linkTo "profiles" tagName="li"}}
        {{accountName}}
    {{/linkTo}}
{{/each}}
{{outlet}}

profiles.hbs:

{{#each model}}
    {{profileName}}
{{/each}}

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?

Yes. So first the user would click on an item in the list of accounts, which then displays the list of profiles for that account. Then the user would select a profile and the profile could appear in yet another outlet. — cwarny
I assume your App.Account has profiles: DS.hasMany('App.Profile')? — chopper
I'm not using Ember data (mainly because, as far as I know, error handling in Ember data is not yet fully functional and I need error handling because I use authentication in my app). So if you can help me without using Ember data, that would be great (if not, I'm also curious to see the solution using Ember data) — cwarny
I see. In that case you will have to adapt the code below. For error handling in ED I use the jQuery ajaxError function, like so: $(document).ajaxError(function(event, jqXHR, ajaxSettings, thrownError) { if (jqXHR.status === 401) { // error handling code here } }); — chopper

chopper chopper · Accepted Answer · 2013-10-04T17:27:37

App.Router.map(function () {
    this.resource("accounts", function () {
        this.resource("account", {path: "/:account_id"})
            this.resource("profiles", function () {
                this.resource("profile", {path: "/:profile_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
    }
});

accounts.hbs:

{{#each content}}
    {{#linkTo "account" this tagName="li"}}
        {{accountName}}
    {{/linkTo}}
{{/each}}
{{outlet}}

account.hbs:

{{#each profiles}}
    {{profileName}}
{{/each}}

Ember - How to link from parent route to child route when both have array controllers?

2 Answers