Ember Octane Glimmer 組件@actions 是如何調用的？

Question

這個問題與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
        });
    }
}

Answer 1

在 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您還有其他三個操作

1. changeOldPassword
2. changeNewPassword
3. 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值與輸入保持同步。

Answer 2

我看到您在示例中使用操作的方式有兩種。

1. 通過{{on}} ：

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

這個案例更直接。 當您在組件模板中執行this時，您指的是組件的類，因此，當提交 DOM 事件在form元素中發生時，模板會調用this.changePassword 。

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

2. 通過{{action}}

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

在這種情況下，每當@changePassword在Clients::ChangePasswordForm被觸發時，Ember 將在使用Clients::ChangePasswordForm的組件的類中的操作哈希（經典語法）或修飾方法（ @action ）中搜索changePassword 。 Clients::ChangePasswordForm 。

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

希望這有助於闡明作用機制。

對於額外的作業，您可能需要查看有關操作的升級指南。