Как называется компонент Eactions Octan Glimmer @actions? - PullRequest
Новая
       3

Как называется компонент Eactions Octan Glimmer @actions?

0 голосов
/ 31 марта 2020

Этот вопрос относится к Ember Octane Upgrade. Как передать значения из компонента в контроллер

Я пытался получить и присвоить значения из формы 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
        });
    }
}

Ответы [ 2 ]

1 голос
/ 31 марта 2020

Я вижу, что вы используете действия в своих примерах двумя способами.

  1. Через {{on}}: 
<form class="m-t" role="form" {{on "submit" this.changePassword}}>

Этот случай более прост. Когда вы делаете this в шаблоне компонента, вы ссылаетесь на класс компонента, поэтому шаблон this.changePassword вызывается при событии отправки DOM в элементе form.

Вы можете см. дополнительную информацию в {{on}} API документах .

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

В этом случае, когда @changePassword запускается внутри Clients::ChangePasswordForm, Ember будет искать changePassword в действиях ha sh (синтаксис classi c) или декорированный метод (@action) в классе компонента, который использует Clients::ChangePasswordForm.

Дополнительную информацию можно найти в документах API {{action}}. .

Надеюсь, это поможет прояснить механизмы действий.

Для дополнительной домашней работы вы можете проверить руководства по обновлению действий .

1 голос
/ 31 марта 2020

В Ember Octane вы хотите использовать модификатор on для настройки действий.

Строка 

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

эффективно устанавливает прослушиватель событий для события submit этого элемента формы, который вызовет функцию 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 есть три других действия

  1. changeOldPassword
  2. changeNewPassword
  3. changeConfirmPassword

, которые, насколько я могу судить по опубликованному вами коду, никогда не используются. Они выглядят как код, который вы использовали бы для настройки одностороннего связанного ввода, но вы используете встроенный Input, который является встроенным компонентом ввода Ember (и использует двустороннее связывание между входным значением и @value). Очень важное различие, которое стоит отметить, - это прописные буквы I на Input. Все компоненты угловых скобок используют заглавные буквы (каждое отдельное слово начинается с заглавной буквы).

Если бы вместо этого вы сделали что-то вроде: 

<input type="password" class="form-control" placeholder="New Password" value={{this.newPassword}} {{on 'input' this.changeNewPassword}} required="true">

Тогда вы бы связали функцию this.changeNewPassword с событием input элемента <input> (который является нативным *). 1057 * <input>. С помощью действия changeNewPassword, которое вы определили: 

@action
changeNewPassword(ev) {
  this.newPassword = ev.target.value;
}

Вы бы сохранили значение this.newPassword в syn c со входом через одностороннюю привязку.

...