Ember Component does not reload on route reload or transitionTo

Question

I have an ember route that calls an ember component to display all the data.

I have a case in which the route's key changes and I reload using route.transitionTo. The data is loaded fine. But the problem is the component does stuff in the init and didInsertElement methods, which on the route.transitionTo aren't triggered.

How can I make sure on transitionTo the component is called again?

I can't use route.refresh because that doesn't do the model hook.

Any help will be appreciated, Thank you!

Answer 1

Well, there is a harder and better way, and there is a lazy and fast way:

1. Better way: I suggest you to create a property in the route and pass this parameter to the component, and in the component create a computed property for that parameter, what you've sent, and there you can run your code what you called in "init" and "didInsertElement" function.

E.g.: router.hbs

{{component-name parameter=parameter}}

Component.js

lineWidth: Ember.computed('parameter', function() {
    // I will run here if I get the parameter (and the parameter changed in route)
}),

2. Not the best way: You can reload the whole component like this:

router.hbs

{{#if reload}}
    {{component-name}}
{{/if}}

router.js

this.set('reload', false);
Ember.run.next(() => {
    this.set('reload', true);
});