使用关闭动作,除非您需要冒泡 [英] Use closure actions, unless you need bubbling
问题描述
我不知道我的代码有什么问题。
template / components / item.hbs:
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错误使用闭包动作,除非您需要冒泡ember / closure-actions
Ember/library-app/app/components/item.js 8:13 error Use closure actions, unless you need bubbling ember/closure-actions
推荐答案
因为ember> 2.0闭包动作是首选处理方式操作(Data Down Actions Up DDAU)。
Since ember > 2.0 closure actions are the favored way to handle actions (Data Down Actions Up 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/关闭动作.md
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
- 您可以将代码重写为:
my-button.hbs
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
my-button.js
import Component from '@ember/component';
export default Component.extend({
buttonLabel: 'Save',
actions: {
buttonClicked(param) {
this.get('onButtonClicked')(param);
}
}
});
- 或者您可以通过以下方式挥舞自己的行动:
my-button.hbs
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
my-button.js
import Component from '@ember/component';
export default Component.extend({
buttonLabel: 'Save'
});
这篇关于使用关闭动作,除非您需要冒泡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!