Use closure actions, unless you need bubbling

Question

I don't know what's wrong in my code. template/components/item.hbs:

<div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default" {{action 'buttonClicked' item}} disabled={{unless item.isValid true}}>{{buttonLabel}}</button>
        </div>
</div>

components/item.js:

import Component from '@ember/component';

export default Component.extend({
    buttonLabel: 'Save',

    actions: {
        buttonClicked(param) {
            this.sendAction('action', param);
        }
    }
});

Ember/library-app/app/components/item.js 8:13 error Use closure actions, unless you need bubbling ember/closure-actions

Answer 1

Since ember > 2.0 closure actions are the favored way to handle actions (Data Down Actions Up DDAU).

I would recommend reading this http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/

Since newer ember versions(2.18 I believe), there is a ESlint rule to point out that people should move to closure actions: https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/closure-actions.md

1. You could rewrite your code to:

my-button.hbs

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default" onclick={{action "buttonClicked" item}} disabled={{unless item.isValid true}}>{{buttonLabel}}</button>
  </div>
</div>

my-button.js

import Component from '@ember/component';

export default Component.extend({
  buttonLabel: 'Save',

  actions: {
    buttonClicked(param) {
      this.get('onButtonClicked')(param);
    }
  }
});

2. Or you could wave your action through:

my-button.hbs

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default" onclick={{action onButtonClicked item}} disabled={{unless item.isValid true}}>{{buttonLabel}}</button>
  </div>
</div>

my-button.js

import Component from '@ember/component';

export default Component.extend({
  buttonLabel: 'Save'
});