Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Possible to make a route transition inside of a service in Ember?

Tags:

ember.js

I'm using ember-cli 1.13.8 and I have a service that handles most of my logic. Right now I have a function that listens to whether certain things are true or false and then can make a route change based upon that. I'd rather not have to call that function from inside every route since I want it to happen on every route. Its goal is to determine whether the player won and every interaction in the game drives this.

Inside of my game service:

init() {
  ... 
  if(true) {
    console.log("you've won!");
    this.transitionTo("congratulations");
  }
},

Of course, this fails because this isn't a route like Ember expects. I know I can call this method from inside of every route instead but I'm wondering if there is a better way to do this.

Thanks

Edit

So far I've tried importing in the App and then trying to extend the Router. This seems like a bad idea though.

like image 582
user3162553 Avatar asked Oct 25 '15 20:10

user3162553


People also ask

What is index route in Ember?

Index Routes. At every level of nesting (including the top level), Ember automatically provides a route for the / path named index . To see when a new level of nesting occurs, check the router, whenever you see a function , that's a new level. For example, if you write a simple router like this: app/router.js Router.

What is asynchronous router?

Asynchronous routing is the most straightforward method of routing signals. Any asynchronous route can be defined in terms of two signals: a source and a destination. A digital pulse or train comes in on the source and is propagated to the destination.

What is service in Ember?

A Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application. Services are useful for features that require shared state or persistent connections. Example uses of services might include: User/session authentication. Geolocation.


2 Answers

You can use the routing service (which is a private API):

routing: Ember.inject.service('-routing'),

init() {
  ... 
  if(true) {
    console.log("you've won!");
    this.get("routing").transitionTo("congratulations");
  }
},
like image 55
dwickern Avatar answered Jan 03 '23 23:01

dwickern


As of Ember 2.15, there is a public router service for exactly this use case. Just add router: Ember.inject.service(), to your Ember class and call this.get('router').transitionTo(...);, easy!


Generally this is a bad idea, but in some cases it's easier than passing through route actions in 100 places (personal experience).

The better way to do this from anywhere is to look the router up on the container:

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

this has to be some container allocated Ember object, which includes components, services, and Ember Data models.

Note also that if this will be called a lot, you will want to store the router as a property. You can do this in the init hook:

init() {
  this._super(...arguments);
  this.set('router', Ember.getOwner(this).lookup('router:main'));
}
...
this.get('router').transitionTo(...);

Ember.getOwner(this) works in Ember 2.3+, prior to that you can use this.get('container') instead.

like image 21
DuBistKomisch Avatar answered Jan 03 '23 23:01

DuBistKomisch