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
            
              import Mixin from '@ember/mixin';

export default Mixin.create({
  actions: {
    displayBanner(msg) {
      // ...
    }
  }
});

        
              app/routes/welcome.js
            
              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
            
              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
            
              import Mixin from '@ember/mixin';

export default Mixin.create({
  actions: {
    debugRouteInformation() {
      console.debug("It's a-me, console.debug!");
    }
  }
});

        
              debug.js
            
              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
            
              Router.map(function() {
  this.route("album", function() {
    this.route("song");
  });
});

        
              app/routes/album.js
            
              import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    startPlaying: function() {
    }
  }
});

        
              song.js
            
              import Route from '@ember/routing/route';

export default Route.extend({
  actions: {
    startPlaying() {
      // ...

      if (actionShouldAlsoBeTriggeredOnParentRoute) {
        return true;
      }
    }
  }
});

Class Ember.ControllerMixin

Methods

Properties

Events