Ember Octane Glimmer 组件 @actions 是如何调用的？

Question

这个问题与

相关

我一直在努力从 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>

哈佛商学院模板

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

Answer 1

在 Ember Octane 中，您想使用 on 修饰符来设置动作。

行

<form class="m-t" role="form" {{on "submit" this.changePassword}}>

有效地为此表单元素的 submit 事件设置一个事件侦听器，它将调用组件 class 上的 changePassword 函数（因为 this 在this.changePassword表示该函数是组件本地的）

调用此操作的：

@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

据我从您发布的代码中可以看出，它从未被使用过。它们看起来像您用来设置单向绑定输入的代码，但您使用的是 built-in Input，即 Ember input built-in component（并使用 two-way 输入值和 @value 之间的绑定。需要注意的非常重要的区别是 Input 上的大写字母 I。所有尖括号组件都使用 title-casing（每个单独的单词以大写字母开头）。

你有没有做过类似的事情：

<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 值与输入保持同步。

Answer 2

我看到您在示例中使用动作的方式有两种。

通过{{on}}:

<form class="m-t" role="form" {{on "submit" this.changePassword}}>

这个案例比较直接。当您在组件模板中执行 this 时，您指的是组件的 class，因此，当提交 DOM 事件发生在 form元素.

您可以在 {{on}} API docs 中查看更多信息。

通过{{action}}

<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />

在这种情况下，每当在 Clients::ChangePasswordForm 中触发 @changePassword 时，Ember 将在操作哈希 (classic语法）或使用 Clients::ChangePasswordForm.

的组件的 class 中的装饰方法（@action）

您可以在 {{action}} API docs 中查看更多信息。

希望这有助于阐明作用机制。

对于额外的作业，您可能需要查看 upgrade guides on actions。

Ember Octane Glimmer 组件 @actions 是如何调用的？

How are Ember Octane Glimmer component @actions called?

ember.js