Ember.js 使用闭包动作，除非需要冒泡

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

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错误使用关闭操作，除非您需要冒泡余烬/关闭操作

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

尝试使用其他actionName，而不是名称“action”

像

然后在父模板中将其用作

---

{{item onButtonClick=“someActionHandledingParent”}

因为ember>2.0闭包操作是处理操作（DDAU上的数据向下操作）的首选方法

我建议你读这本书

自较新的ember版本（我相信是2.18）以来，有一条ESlint规则指出人们应该转向关闭操作：

您可以将代码重写为：

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>

<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.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>

<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>

---

传递给item component的参数是什么？。要了解闭包动作与经典动作的区别，请阅读我的答案

import Component from '@ember/component';

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