Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.js route hook to be called on every transition

Tags:

ember.js

Is there a route hook in Ember.js that is called on every transition, even if the new route is the same as the old route (for example, clicking a top-level navigation link to the same route).

I tried activate, but it's only being called once, and is not being called again when I use the top-level navigation to go to the same route I'm already in.

Example jsFiddle: When I click "Test" the first time, the activate hook is called, but when I click it a second time, it does not.

like image 428
imgx64 Avatar asked Jan 14 '14 11:01

imgx64


People also ask

Can you transition in Ember?

During a route transition, the Ember Router passes a transition object to the various hooks on the routes involved in the transition. Any hook that has access to this transition object has the ability to immediately abort the transition by calling transition.

What is hooks in Ember?

In Ember, route handlers are responsible for loading the model with data for the page. It loads the data in a function called model . The model function acts as a hook, meaning that Ember will call it for us during different times in our app.

What is asynchronous router?

What is Asymmetric Routing? In Asymmetric routing, a packet traverses from a source to a destination in one path and takes a different path when it returns to the source. This is commonly seen in Layer-3 routed networks.

What is route in Ember JS?

An Ember route is built with three parts: An entry in the Ember router ( /app/router. js ), which maps between our route name and a specific URI. A route handler file, which sets up what should happen when that route is loaded (app/routes/about.

How do I use transitionto() method in Ember?

Ember allows you to control that access with a combination of hooks and methods in your route. One of the methods is transitionTo () . Calling transitionTo () from a route or transitionToRoute () from a controller will stop any transitions currently in progress and start a new one, functioning as a redirect.

What is the model() hook in Ember for?

The model () hook is called with the params and transition arguments and generally has one purpose to convert the URL into the model for this current route context. This usually means reaching into the Ember Data store to retrieve your model data.

What is the route Hook lifecycle in Ember?

The route hook lifecycle in Ember can be broken up into two distinct phases: the validation phase and the setup phase. These two phases are surrounded by two separate actions that get triggered within the context of the route: willTransition () at the beginning and didTransition () at the end after a successful transition.

What is the use of before model hook in route?

The beforeModel () hook gets called with a single transition argument. This hook is best used as a place to redirect to another route before needing to execute the current route’s model () hook — if you don’t need any information that is contained within that model.


4 Answers

You can setup a didTransition in the router, exactly how Ember does it for Google Analytics.

App.Router.reopen({
 doSomething: function() {
    // do something here
    return;
  }.on('didTransition')
});

See example here: http://emberjs.com/guides/cookbook/helpers_and_components/adding_google_analytics_tracking/

UPDATE: (new link since old is broken) https://guides.emberjs.com/v1.10.0/cookbook/helpers_and_components/adding_google_analytics_tracking/

like image 165
kaiwah.ng Avatar answered Sep 22 '22 01:09

kaiwah.ng


Activate is not being called a second time because This hook is executed when the router enters the route... And when you click on that link-to a second time, the router isn't doing anything... As in, no transition is being made (although it is "attempted").

http://emberjs.com/api/classes/Ember.Route.html#method_activate

The method that I have found to work best is observing the currentPath from within a controller. I use this for animations between routes.

In your application controller you can do something like the following:

currentPathChange: function () {
  switch(this.get('currentPath')){
    case 'test.index':
      this.doSomething();
      break;
    case 'test.new':
      this.doSomethingElse();
      break;
  }
}.observes('currentPath')

You should be able to access almost any part of your app from the application controller, so it's a nice "root hook," I suppose.

Example: http://jsfiddle.net/mattblancarte/jxWjh/2/

like image 38
Matthew Blancarte Avatar answered Sep 20 '22 01:09

Matthew Blancarte


Did you already consider the hook willTransition?

http://emberjs.com/guides/routing/preventing-and-retrying-transitions/

App.SomeRoute = Ember.Route.extend({
  actions: {
    willTransition: function(transition) {
      // do your stuff
    }
  }
});
like image 26
mavilein Avatar answered Sep 20 '22 01:09

mavilein


Alter/Hack EmberJS code and add a jQuery event trigger inside the doTransition() Function. This is Best but kind of defeating the point.

As of today, 1 year later and Ember 2.0 kind of out, there is NO OTHER WAY :(

Ember does not provide a way to track route-change attempts! This includes URLattemts(history), link-to attempts, hash change attempts etc..

like image 38
Everydaypanos Avatar answered Sep 22 '22 01:09

Everydaypanos