[英]How are Ember Octane Glimmer component @actions called?
这个问题与Ember Octane Upgrade How to pass values from component to controller 有关
我正在努力从 HBS 表单接收值并将其分配到组件中,然后将其传递给控制器。 工作答案表明我必须为每个表单字段创建一个@action
函数。 例如:
@action
changeNewPassword(ev) {
this.newPassword = ev.target.value;
}
但是,我不明白在何处或如何调用这些函数,因此我不明白它们为什么起作用。 有谁知道这些函数是如何调用的?
模板组件 HBS
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<h3>Change Password</h3>
<form class="m-t" role="form" {{on "submit" this.changePassword}}>
{{#each this.errors as |error|}}
<div class="error-alert">{{error.detail}}</div>
{{/each}}
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Old Password" @value={{this.oldPassword}} required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="New Password" @value={{this.newPassword}} required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Confirm Password" @value={{this.confirmPassword}} required="true" />
</div>
<div>
<button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
</div>
</form>
</div>
</div>
模板 HBS
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
模板组件JS
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;
@tracked errors = [];
@action
changeOldPassword(ev) {
this.oldPassword = ev.target.value;
}
@action
changeNewPassword(ev) {
this.newPassword = ev.target.value;
}
@action
changeConfirmPassword(ev) {
this.confirmPassword = ev.target.value;
}
@action
changePassword(ev) {
ev.preventDefault();
this.args.changePassword({
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword
});
}
}
在 Ember Octane 中,您希望使用on
修饰符来设置操作。
线
<form class="m-t" role="form" {{on "submit" this.changePassword}}>
有效地为这个表单元素的submit
事件设置一个事件监听器,它将调用组件类上的changePassword
函数(因为this.changePassword
的this
意味着该函数是组件本地的)
调用此操作:
@action
changePassword(ev) {
ev.preventDefault();
this.args.changePassword({
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword
});
}
此changePassword
操作依次调用在命名参数@changePassword
下传递给组件的changePassword
函数
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
现在,在您的Template Component JS
您还有其他三个操作
changeOldPassword
changeNewPassword
changeConfirmPassword
据我从您发布的代码中可以看出,从未使用过。 它们看起来像用于设置单向绑定输入的代码,但您使用的是内置Input
,它是 Ember 输入内置组件(并在输入值和@value
之间使用双向绑定)。 需要注意的非常重要的区别是Input
上的大写I
所有尖括号组件都使用标题框(每个单独的单词都以大写字母开头)。
如果您改为执行以下操作:
<input type="password" class="form-control" placeholder="New Password" value={{this.newPassword}} {{on 'input' this.changeNewPassword}} required="true">
然后,您将this.changeNewPassword
函数绑定到<input>
元素的input
事件(这是本机 html <input>
。使用您定义的changeNewPassword
操作:
@action
changeNewPassword(ev) {
this.newPassword = ev.target.value;
}
您可以通过一种方式绑定使this.newPassword
值与输入保持同步。
我看到您在示例中使用操作的方式有两种。
{{on}}
:<form class="m-t" role="form" {{on "submit" this.changePassword}}>
这个案例更直接。 当您在组件模板中执行this
时,您指的是组件的类,因此,当提交 DOM 事件在form
元素中发生时,模板会调用this.changePassword
。
您可以在{{on}}
API 文档 中查看更多信息。
{{action}}
<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />
在这种情况下,每当@changePassword
在Clients::ChangePasswordForm
被触发时,Ember 将在使用Clients::ChangePasswordForm
的组件的类中的操作哈希(经典语法)或修饰方法( @action
)中搜索changePassword
。 Clients::ChangePasswordForm
。
您可以在{{action}}
API 文档 中查看更多信息。
希望这有助于阐明作用机制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.