Hooks (called after entering):

beforeModel

model

afterModel

redirect

setupController

renderTemplate

Actions:

willTransition

didTransition

loading

error

activate (after redirect )

(after ) deactivate (first hook when exiting a route)

(first hook when exiting a route) resetController (called after deactivate when exiting a route)

Use Cases for Hooks

beforeModel

This is the place to put logic before the route loads any data.

Examples might include:

Transitioning to a login route if the user is not logged in

Transitioning to a particular route from the application route (e.g. redirect to /bands from / )

model

Fetches the main data backing up the route’s template.

afterModel

This is the place to put logic after the route has loaded its data.

Examples might include:

Banning a user from seeing a resource they have no access to

Redirecting to the detailed post view if there is only one post

redirect

This can be used for the same purpose as afterModel , the only difference being that transitioning in redirect does not invalidate the current transition, and thus does not rerun the previous hooks.

setupController

Sets up data other than the model on the controller.

activate

Called when the route has been fully entered.

One use case might be setting a CSS class on the body tag so that a modal becomes visible.

deactivate

Called when the route has been exited

A possible use case is resetting the CSS class that was set in the activate hook. In general, this is used to reset what was done in activate .

resetController

This hook is called when either the route is exited or its model changes (switching from one post to the next). These two cases are distinguished by the second argument of the method, which is true when the route is exited.

Since route-driven controllers are singletons in Ember, this is the best place to reset properties on the controller that we don’t want to persist when the route is exited. A valid use case might be resetting a counter to zero, or flipping back a switch that designates the status of a UX flow.

Use Cases for Actions

willTransition

This action is fired before the router starts the transition, which gives the developer the possibility to conditionally abort it.

Consequently, it might be used to warn the user about losing unsaved changes, for example.

didTransition

This action is fired on the destination route when the transition has fully completed. Setting the document’s title is a possible use case for this route action.

loading

If a model hook returns a promise, that promise must be resolved before the corresponding template can be rendered. When the model hook returns a promise, a loading action is fired on the parent route (so for bands.band , the loading action is fired on bands ), which, by default, renders a loading template under the parent (in the given example, bands.loading ). This default behavior can be overridden.

error