Class Ember.ActionHandler
privateEmber.ActionHandler
is available on some familiar classes including
Ember.Route
, Ember.Component
, and Ember.Controller
.
(Internally the mixin is used by Ember.CoreView
, Ember.ControllerMixin
,
and Ember.Route
and available to the above classes through
inheritance.)
actions public
Defined in packages/ember-runtime/lib/mixins/action_handler.js:22
The collection of functions, keyed by name, available on this
ActionHandler
as action targets.
These functions will be invoked when a matching {{action}}
is triggered
from within a template and the application's current route is this route.
Actions can also be invoked from other parts of your application
via ActionHandler#send
.
The actions
hash will inherit action handlers from
the actions
hash defined on extended parent classes
or mixins rather than just replace the entire hash, e.g.:
banner.js | |
1 2 3 4 5 6 7 8 9 |
import Mixin from '@ember/mixin'; export default Mixin.create({ actions: { displayBanner(msg) { // ... } } }); |
app/routes/welcome.js | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Route from '@ember/routing/route'; import CanDisplayBanner from '../mixins/can-display-banner'; export default Route.extend(CanDisplayBanner, { actions: { playMusic() { // ... } } }); // `WelcomeRoute`, when active, will be able to respond // to both actions, since the actions hash is merged rather // then replaced when extending mixins / parent classes. this.send('displayBanner'); this.send('playMusic'); |
Within a Controller, Route or Component's action handler,
the value of the this
context is the Controller, Route or
Component object:
app/routes/song.js | |
1 2 3 4 5 6 7 8 9 10 11 |
import Route from '@ember/routing/route'; export default Route.extend({ actions: { myAction() { this.controllerFor("song"); this.transitionTo("other.route"); ... } } }); |
It is also possible to call this._super(...arguments)
from within an
action handler if it overrides a handler defined on a parent
class or mixin:
Take for example the following routes:
route.js | |
1 2 3 4 5 6 7 8 9 |
import Mixin from '@ember/mixin'; export default Ember.Mixin.create({ actions: { debugRouteInformation() { console.debug("It's a-me, console.debug!"); } } }); |
debug.js | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import Route from '@ember/routing/route'; import DebugRoute from '../mixins/debug-route'; export default Route.extend(DebugRoute, { actions: { debugRouteInformation() { // also call the debugRouteInformation of mixed in DebugRoute this._super(...arguments); // show additional annoyance window.alert(...); } } }); |
Bubbling
By default, an action will stop bubbling once a handler defined
on the actions
hash handles it. To continue bubbling the action,
you must return true
from the handler:
app/router.js | |
1 2 3 4 5 |
Router.map(function() { this.route("album", function() { this.route("song"); }); }); |
app/routes/album.js | |
1 2 3 4 5 6 7 8 |
import Route from '@ember/routing/route'; export default Route.extend({ actions: { startPlaying: function() { } } }); |
song.js | |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import Route from '@ember/routing/route'; export default Route.extend({ actions: { startPlaying() { // ... if (actionShouldAlsoBeTriggeredOnParentRoute) { return true; } } } }); |