How to access params in the afterModel hook

Question

I was using an RSVP.hash in my model hook. But I needed my route to load dynamic data based on the url (which contains a dynamic segment). i.e. this.route('foo', {path: ':id'}).

So I decided to move some stuff out, to the afterModel hook instead.

However, I needed to execute the store with params (for pagination):

model(params) {
  this.set('params', params);
  return this.store.findRecord('foo', params.foo_id);
},

afterModel: function(model) {
  console.log(this.get('params')); // logs the right params
  let params = this.get('params');

  // This store query needs access to params
  this.store.query('bar', { filter: { 'foo-id': model.get('id') }, page: { number: (params.page ? params.page : 1) } }).then(bars => {
    this.controller.set('bars', bars);
  });
}

setupController(controller, model) {
  this._super(controller, model);

  this.set('bars', bars);
}

So far I have this, which works:

model(params) {
  this.set('params', params);
  ...
},

afterModel: function(model) {
  console.log(this.get('params')); // logs the right params
  ...
}

But is this the only way to access params in the afterModel hook?

Is this approach sane?

score 6 · Answer 1 · edited Jan 17 '19 at 13:41

6

Use the this.paramsFor(this.routeName) function to get a plain object with the params in.

edited Jan 17 '19 at 13:41

slashnick

26,167
10
55
67

answered May 21 '18 at 12:57

Epirocks

480
4
11

Piotr · Accepted Answer · 2016-01-22T10:32:51.197

5

The afterModel hook provides a second argument named transition. You can get the params from it using a path like this: transition.params.{route-name}.{param-name}, so considering your example:

//let's say this is BazRoute and BazController:

model(params) {
  return this.store.findRecord('foo', params.foo_id);
},

afterModel: function(model, transition) {
  const params = transition.params.baz;
  console.log(params); // logs the right params

  // This store query needs access to params
  this.store.query('bar', { filter: { 'foo-id': model.get('id') }, page: { number: (params.page ? params.page : 1) } }).then(bars => {
    this.controller.set('bars', bars);
  });
}

edited Jan 22 '16 at 10:32

answered Jan 21 '16 at 21:04

Piotr

860
5
11

But my model is now a `RSVP.hash`, which takes us back to the issue in the first place. No? More info here http://stackoverflow.com/questions/20521967/emberjs-how-to-load-multiple-models-on-the-same-route – Christian Fazzini Jan 21 '16 at 21:36
@ChristianFazzini I've rewritten my answer :) – Piotr Jan 21 '16 at 22:16
Oh nice! Didnt know that! For the curious. If route name has two or more words. Then something like `transition.params['foo-bar']` will suffice. I wonder why there isnt much mention about this on the net (let alone, not documented in the docs) – Christian Fazzini Jan 21 '16 at 23:25
This q&a is about dynamic segments. In case anyone else was looking for QUERY params, those are in `transition.queryParams`. https://stackoverflow.com/questions/25941837/how-to-access-query-parameters-from-route-in-ember-1-7 – Justin Sep 11 '17 at 19:57
1

As of ember 3.7 accessing the params on the transition will throw a deprecation warning. Using @Epirocks answer works as expected. – slashnick Jan 17 '19 at 13:42

How to access params in the afterModel hook

2 Answers2