nullpointer
nullpointer

Reputation: 532

Refresh / Reload ember route from a component

I have a component, that's actually a modal dialog. When I am done with that dialog and press the "Ok" button, I want to stay on the stay page from where I opened that dialog. Which isn't difficult.

But the problem is that the dialog changes the data (I am getting data through a REST call) so I need to refresh the route that I already am on to reflect the data changes.

Since, I am calling it from a component, I don't have Route so can't call route.refresh().

I tried to get the router:

this.set('router', Ember.getOwner(this).lookup('router:main'));

and did transition to the same page:

_this.get('router').transitionTo('my-route')

But since the route hasn't changed (I only opened a dialog), transitionTo doesn't get triggered!

Is there a way I can force trigger transitionTo or refresh the page that I am on?

Thank you!

Upvotes: 5

Views: 11827

Answers (2)

Ramy Ben Aroya
Ramy Ben Aroya

Reputation: 2423

First, you can easily get the current route name by injecting the routing service to the component.
Then, you can get the current route instance and apply its refresh method:

// app/components/a-component.js

import Component from "ember-component";
import service from "ember-service/inject";
import getOwner from "ember-owner/get";

export default Component.extend({
  routing: service("-routing"),
  actions: {
    refresh() {
      const currentRouteName = this.get("routing.currentRouteName");
      const currentRouteInstance = getOwner(this).lookup(`route:${currentRouteName}`);
      currentRouteInstance.refresh();
    }
  }
});

Upvotes: 8

Ember Freak
Ember Freak

Reputation: 12872

For this, define refreshCurrentRoute method in nearest route or in application route file.

actions:{
 refreshCurrentRoute(){
  this.refresh();
 }
}

From your component, you need to call refreshCurrentRoute action. either you can use ember-route-action-helper or by passing the closure action.

Upvotes: 7

Related Questions