How to reload a child route's model inside a parent route?

Question

I have a nested route (see below).

this.route('home', {
    path: '/'
}, function() {
    this.route('foo', {
        path: '/foo'
    });
    this.route('bar', {
        path: '/bar'
    });
});

The foo route model return a collection (array).

Inside parent route home, I define a function called reloadModel.

I try to reload the model from the controller but failed (produce an undefined function error, controller.get(...).refresh is not a function or controller.get(...).reload is not a function).

    reloadModel() {
        const controller = this.controllerFor('home/a');
        controller.get('model').reload();
    },

I would like to reload the child route's model from the parent route; however, I do now know to can I get the child route?

My Question

How can I refresh model in route foo or bar from route home?

Any hint is appreciated.

Which function is undefined in your error get, controllerFor or reload? — nem035
I have updated the question. Is this because the model I retrived from the controller just a plain object? — Glass
that would definitely cause problems because only Ember Data models have the reload method. — nem035

nem035 nem035 · Accepted Answer · 2017-01-23T04:36:51

It is usually not a good idea to refresh child route's model from the parent route because it might not have been loaded in the first place. The opposite, refreshing the parent's model from the child, is fine because loading a child route requires, by design, to first load the parent route which will load the parent's model.

Based on your need for such feature, it seems that you're putting yourself in a tough position and should probably think about WHY does my design require me to do this, not HOW I can do it.

Neverthless, the approach you could use is to, within the parent home route, call the same functionality that you call within a child's model route.

If for example route a had:

model() {
  return this.store.findRecord('a');
}

You would do a similar thing in home:

reloadModel() {
  this.store.findRecord('a', { reload: true }); // skip the cache and make the request
}

How to reload a child route's model inside a parent route?

1 Answers