使用闭包操作，除非需要冒泡

Question

我不知道我的代码出了什么问题。模板/组件/项目.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>

组件/项目.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 错误 使用闭包操作，除非需要冒泡的余烬/闭包操作

Answer 1

由于余烬> 2.0 闭包操作是处理操作的首选方式(数据向下操作 DDAU(。

我建议阅读此 http://miguelcamba.com/blog/2016/01/24/ember-closure-actions-in-depth/

由于较新的余烬版本(我相信是2.18(，有一个ESlint规则指出人们应该转向关闭操作：https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/closure-actions.md

1. 您可以将代码重写为：

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>

我的按钮.js

import Component from '@ember/component';
export default Component.extend({
  buttonLabel: 'Save',
  actions: {
    buttonClicked(param) {
      this.get('onButtonClicked')(param);
    }
  }
});

2. 或者你可以通过以下方式挥手行动：

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>

我的按钮.js

import Component from '@ember/component';
export default Component.extend({
  buttonLabel: 'Save'
});

Answer 2

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

尝试使用其他操作名称代替名称"操作">

喜欢

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

然后在父模板中将其用作

{{item onButtonClick="someActionHandledInTheParent"}}