linkTo not picking up parameters

Question

I want to {{linkTo}} the /activities/:user/:by_date route:

this.resource('activities', { path: '/activities' }, function() {
    this.route('by_date', {path: '/:user/:by_date'});
});

If I directly put the parameters into the URL the controller behaves correctly and I just want my application template to linkTo this URL with a reasonable hardcoded set of values for these parameters. I am attempting to do this by setting an instance variable in the ApplicationController:

activityDefaults: {user:1, by_date:"2013-07-01"}

I think have the linkTo in the application template:

{{#linkTo "activities.by_date" activityDefaults}}Activities{{/linkTo}}

Unfortunately this doesn't work, resolving the URL to:

/activities/undefined/undefined

Any and all help would be appreciated.

-=-=-=-=-=-=-=-=-=-= UPDATE -=-=-=-=-=-=-=-=-=-=

I've tried making the activityDefaults an Ember object:

module.exports = activityDefaults = Ember.Object.create({
    user_id: 1, 
    by_date: "2012-07-12"
});

And then I've added a serializer to the ActivitiesByDateController:

serialize: function(model) {
    return {
        user_id: model.get('user_id'), 
        by_date: model.get('by_date')
    };
}

The {{linkTo}} still doesn't work but there are subtle differences. Hovering over the link you no longer see any URL beyond the base URL (note: before it had /activities/undefined/undefined). Also when you click on the link it sends the following message to the browser's console:

This linkTo is in an inactive loading state because at least one of its parameters' presently has a null/undefined value, or the provided route name is invalid.

NOTE: I did change the inconsistent use of on_date/by_date to be consistently using the by_date naming convention. I am a little but blurry on when Ember converts underscored variables and converts them to camelCase. I don't think I'm running into that but it's bugging me in the back of my mind.

intuitivepixel intuitivepixel · Accepted Answer · 2013-08-13T21:57:28

You should hook into the serialize function and provide the dynamic segments your URL resolution needs (assuming user_id and on_date are properties available on your Activity model):

App.ActivitiesByDateRoute = Ember.Route.extend({
  ...
  serialize: function(model) {
    return {
      user_id: model.get('user_id'), 
      on_date: model.get('on_date')
    };
  }
});

Then assuming further you have where your linkTo helper lives activity as the model available, it would look like this:

{{#linkTo "activities.by_date" activity}}Activities{{/linkTo}}

Also worth mentioning is that if you name your route on_date you should name your template the same way or vice versa. Ember works a lot with conventions and if you don't want yourself running into nasty errors at some point you should be consistent with naming's in your app.

That said, IMO you should rename your route in your router map also by_date the dynamic segment can have a different name since you are going to pick it up in the serialize hook later on.

this.resource('activities', { path: '/activities' }, function() {
  this.route('by_date', {path: '/:user/:on_date'});
});

If you where now asking "how does he know that my route is called ActivitiesByDateRoute?" I saw it on another question of yours :)

Hope it helps.

linkTo not picking up parameters

1 Answers