CODEWITHSUNDEEP
ember.js
John Ashenden
John Ashenden

Reputation: 23

Trouble access dynamic segment in Ember.js Object Route

I'm experiencing some strange behavior with the accessing the dynamic segment from the route.

I have a Keyword model. When showing the collection of Keywords, I want the path to read /keywords. When accessing a single Keyword, I want the path to read /keyword/:KEYWORD_ID. By convention, Ember wants you to do the following…

this.resource('keywords', { path: '/keywords' }, function() {

    this.route('new', { path: '/new' });
    this.resource('keyword', { path: '/keyword/:keyword_id' }, function() {

        this.route('edit');

    });

});

In order to achieve the above behavior, I'm doing the following...

this.resource('keywords', { path: '/keywords' }, function() {

    this.route('new', { path: '/new' });

});

this.resource('keyword', { path: '/keyword/:keyword_id' }, function() {

    this.route('edit');

});

However, when using the second approach, the route for KeywordIndex (i.e. the single Keyword Object), the params object is null, and the content on screen is blank.

App.KeywordIndexRoute = Ember.Route.extend({

    model: function(params) {

            return App.Keyword.find(params.keyword_id);

    },

    renderTemplate: function(controller, model) {

        this.render({outlet: 'page'});

    }

});

Has anyone experienced this issue? Is there a better way to approach this problem?

Upvotes: 0

Views: 571

Answers (1)

John Ashenden
John Ashenden

Reputation: 23

Problem solved. The issue was in our API for this specific object. The best approach, for those considering this routing pattern is as follows...

this.resource('keywords', { path: '/keywords' }, function() {

    this.route('new', { path: '/new' });

});

this.resource('keyword', { path: '/keyword/:keyword_id' }, function() {

    this.route('edit');

});

You would then access the model in your controller like this...

App.KeywordIndexRoute = Ember.Route.extend({

    model: function(params) {

        return this.modelFor("keyword");

    },

    renderTemplate: function(controller, model) {

        this.render({outlet: 'page'});

    }

});

Upvotes: 0

Related Questions