Class Ember.ActionSupport

private
Defined in: packages/ember-views/lib/mixins/action_support.js:21
Module: ember

Show:

sendAction (action, params) public

Module: ember

Defined in packages/ember-views/lib/mixins/action_support.js:27

action
String
the action to call
params
*
arguments for the action

Calls an action passed to a component.

For example a component for playing or pausing music may translate click events into action notifications of "play" or "stop" depending on some internal state of the component:

button.js 
1
2
3
4
5
6
7
8
9
10
11

import Component from '@ember/component';

export default Component.extend({
  click() {
    if (this.get('isPlaying')) {
      this.sendAction('play');
    } else {
      this.sendAction('stop');
    }
  }
});

The actions "play" and "stop" must be passed to this play-button component:

1
2

{{! app/templates/application.hbs }}
{{play-button play=(action "musicStarted") stop=(action "musicStopped")}}

When the component receives a browser click event it translate this interaction into application-specific semantics ("play" or "stop") and calls the specified action.

app/controller/application.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    musicStarted() {
      // called when the play button is clicked
      // and the music started playing
    },
    musicStopped() {
      // called when the play button is clicked
      // and the music stopped playing
    }
  }
});

If no action is passed to sendAction a default name of "action" is assumed.

button.js 
1
2
3
4
5
6
7

import Component from '@ember/component';

export default Component.extend({
  click() {
    this.sendAction();
  }
});
 
1
2

{{! app/templates/application.hbs }}
{{next-button action=(action "playNextSongInAlbum")}}
app/controllers/application.js 
1
2
3
4
5
6
7
8
9

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    playNextSongInAlbum() {
      ...
    }
  }
});