Function

action (callback) PropertyDecorator public

Defined in packages/@ember/object/index.js:5

import { action } from '@ember/object';

callback

Function|undefined

The function to turn into an action, when used in classic classes

returns

PropertyDecorator

property decorator instance

Decorator that turns the target function into an Action which can be accessed directly by reference.

1
2
3
4
5
6
7
8

import Component from '@ember/component';
import { action, set } from '@ember/object';

export default class Tooltip extends Component {
  @action toggleShowing() {
    set(this, 'isShowing', !this.isShowing);
  }
}

This is considered best practice, since it means that methods will be bound correctly no matter where they are used. By contrast, the {{action}} helper and modifier can also be used to bind context, but it will be required for every usage of the method:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- template.hbs -->
<button
  {{did-insert (action this.toggleShowing)}}
  {{on "click" (action this.toggleShowing)}}
>
  Show tooltip
</button>

{{#if isShowing}}
  <div class="tooltip">
    I'm a tooltip!
  </div>
{{/if}}

They also do not have equivalents in JavaScript directly, so they cannot be used for other situations where binding would be useful.