简体   繁体   中英

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

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.

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");
  }
},

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.

Ember 1.13:

Create another service called routing:

import Ember from 'ember';

export default Ember.Service.extend({
    _router: null,

    init() {
        this._super();

        this.set('_router', this.get('container').lookup('router:main'));
    },

    transitionTo() {
        this.get('_router').transitionTo(...arguments);
    }
});

Then you can:

routing: Ember.inject.service(),

goSomewhere() {
    this.get('routing').transitionTo('index');
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM