Question

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

部件/ item.js：

import Component from '@ember/component';

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

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

灰烬/库应用程序/应用/组件/ item.js 8:13错误使用关闭操作，除非你需要冒泡ember / closure-actions

Answer 1

自从ember＆gt; 2.0闭包动作是处理动作的有利方式（Data Down Actions Up DDAU）。

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

自从更新的ember版本（我相信2.18）以来，有一个ESlint规则指出人们应该转向关闭行动：https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/closure-actions.md

您可以将代码重写为：

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);
    }
  }
});

或者你可以通过以下方式挥动你的行动：

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'
});

Answer 2

ComboBoxTreeTableCell

而不是名称'action'尝试使用其他actionName

像

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

然后在父模板中将其用作

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

除非你需要冒泡，否则使用关闭动作

2 个答案: