lundi 30 mars 2020

How are Ember Octane Glimmer component @actions called?

This question is related to Ember Octane Upgrade How to pass values from component to controller

I was struggling to receive and assign values from an HBS form into a component and then pass it to the controller. The working answer showed that I had to create an @action function for each form field. For example:

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

But, I do not understand where or how those functions are called and so I do not understand why they work. Does anyone know how these functions are called?

Template Component HBS

<div class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <h3>Change Password</h3>
        <form class="m-t" role="form" >
            
                <div class="error-alert"></div>
            
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Old Password" @value= required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="New Password" @value= required="true" />
            </div>
            <div class="form-group">
                <Input @type="password" class="form-control" placeholder="Confirm Password" @value= required="true" />
            </div>
            <div>
                <button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
            </div>
        </form>
    </div>
</div>

Template HBS

<Clients::ChangePasswordForm @chgpwd= @changePassword= @errors= />

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



Aucun commentaire:

Enregistrer un commentaire