5

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!

nullpointer
  • 490
  • 2
  • 4
  • 20

2 Answers2

8

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();
    }
  }
});
Elias Melgaço
  • 9
  • 2
Ramy Ben Aroya
  • 2,333
  • 14
  • 20
  • Doesn't the `getOwner` lookup give you the `Router` and not the `Route`? As the `refresh` method belongs to `Route` not `Router`. – nullpointer May 24 '17 at 13:33
  • the router is given via `routing.router`. The lookup is looking for a route instance this is because of the `route:` prefix of the looked-up module name. `refresh` method indeed is a `Route` method. `currentRouteInstance.refresh();` is applying the refresh method of the `Route` instance. My solution is different from @kumkanillam's by that it does not require you to bubble up any actions. – Ramy Ben Aroya May 24 '17 at 14:57
  • The `currentRouteInstance` is undefined, and throws an exception on calling `refresh`. The `currentRouteName` was computed fine. – nullpointer May 24 '17 at 16:08
  • What is the currentRouteName? – Ramy Ben Aroya May 24 '17 at 19:00
  • It's just has a string, the name of the route: `my-route` – nullpointer May 24 '17 at 20:06
  • Strange. For some reason the lookup fails. Here is a working twiddle: https://ember-twiddle.com/59382cf82e82a6b0301f322c64a10ae1?openFiles=components.a-component.js%2Ctemplates.components.a-component.hbs – Ramy Ben Aroya May 25 '17 at 11:40
  • [RoutingService](https://www.emberjs.com/api/classes/RoutingService.html) is private so its good to stay away from one. otherwise, future upgrade may not work as expected. – Ember Freak May 25 '17 at 12:19
  • @Ramy Ben Aroya Yes it is strange, I tried passing it manually the route too but didn't work! Thanks though! – nullpointer May 25 '17 at 17:08
  • 1
    @EmberFreak the RouterService is now public API in the latest versions of Ember, so this can be considered safe to use (and is now injected w/o the dash prefix, just `router: service()` works). FYI to anyone finding this answer in 2019. https://api.emberjs.com/ember/3.10/classes/RouterService – Bill Dami Jun 13 '19 at 13:42
7

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.

Ember Freak
  • 12,918
  • 4
  • 24
  • 54