CODEWITHSUNDEEP
ember.js
GJK
GJK

Reputation: 37389

Ember.js link-to helper doesn't update URL correctly

I'm having a fairly annoying problem with the link-to helper in Ember.js (latest build). No matter what I do, I'm getting undefined in the URL, which not only looks dumb, but makes it impossible to refresh the page. I have the following in my template:

{{#link-to 'organizations.organization.projects.index' this}}
    Projects
{{/link-to}}

this being a reference to an organization model. When I use this, Ember.js generated a link that points to /organizations/undefined/organization.organization.projects. However, if I clink on the link, it still takes me to the page with the model resolved. Same thing happens when I replace this with model.

But, if I replace this with id, the link it generates is correct: /organizations/ORG_1/organization.organization.projects. But when I click on the link, the URL no longer shows ORG_1, it shows undefined. But it still manages to resolved the model correctly.

The model with id ORG_1 is a valid model. It's not undefined, it's not null and it's fully loaded. There's nothing wrong with the model, yet Ember.js refuses to correctly place its ID in the URL, but manages to use its data in templates just fine.

Does anybody have any idea what's causing this?

Here's my router, for reference. (I know, the routes are deeply nested. This application is going to be very large.)

App.Router.map(function() {
    // route('application')
    // route('index') -- main dashboard

    this.route('settings');

    this.resource('organizations', function() {
        // route('index') -- organization selector page
        this.resource('organizations.organization', { path: '/:organizationId' }, function() {
            // route('index') -- organization dashboard
            this.resource('organizations.organization.projects', function() {
                // route('index') -- project selector page
                this.resource('organizations.organization.projects.project', { path: '/:projectId' }, function() {
                    // route('index') -- project dashboard
                });
            });
        });
    });

    // Must be the last route to ensure no others match.
    this.route('missing', { path: '*path' });
});

Upvotes: 1

Views: 558

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

The this doesn't have a property organizationId on it, Ember grabs that property from the model.

You can add a serialize hook to map organizationId to id

App.OrganizationsOrganizationRoute = Em.Route.extend({
  serialize:function(model){
    return { organizationId: Em.get(model, 'id')};
  }
})

Upvotes: 1

Related Questions