ember.js Ember Octane Upgrade如何将值从组件传递到控制器

pepwfjgg  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(148)

从Ember <3.15升级到>=3.15。如何将表单值从控制器传递到组件?
我无法开始解释尝试的诊断组合的数量和收到的相应错误。所以,我认为最好问一下应该如何正确地完成它?Glimmer参与其中吗?
举个简单的例子:通过组件将密码old密码更改为newconfirm密码传递到控制器。在组件中,我一直收到onsubmit() is not a function错误。

代码示例:

用户输入表单

更改密码表单.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 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=oldPassword required="true"}}
            </div>
            <div class="form-group">
                {{input type="password" class="form-control" placeholder="New Password" value=newPassword required="true"}}
            </div>
            <div class="form-group">
                {{input type="password" class="form-control" placeholder="Confirm Password" value=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}} {{on "submit" this.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
    changePassword(ev) {

        // Prevent the form's default action.
        ev.preventDefault();

        this.oldPassword = ev.oldPassword;
        this.newPassword = ev.newPassword;
        this.confirmPassword = ev.confirmPassword;

        // Call the form's onsubmit method and pass in the component's values.

        this.onsubmit({
            oldPassword: this.oldPassword,
            newPassword: this.newPassword,
            confirmPassword: this.confirmPassword
        });
    }
}

控制器

更改密码.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ChangePassword extends Controller {

    @service ajax 
    @service session

    @action
    changePassword(attrs) { 

        if(attrs.newPassword == attrs.oldPassword)
        {
            this.set('errors', [{
                detail: "The old password and new password are the same.  The password was not changed.",
                status: 1003,
                title: 'Change Password Failed'
            }]);
        }
        else if(attrs.newPassword != attrs.confirmPassword)
        {
            this.set('errors', [{
                detail: "The new password and confirm password must be the same value.  The password was not changed.",
                status: 1003,
                title: 'Change Password Failed'
            }]);
        }
        else
        {
            let token = this.get('session.data.authenticated.token');

            this.ajax.request(this.store.adapterFor('application').get('host') + "/clients/change-password", {
                method: 'POST',
                data: JSON.stringify({ 
                    data: {
                        attributes: {
                            "old-password" : attrs.oldPassword,
                            "new-password" : attrs.newPassword,
                            "confirm-password" : attrs.confirmPassword
                        },
                        type: 'change-passwords'
                    }
                }),
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/vnd.api+json',
                    'Accept': 'application/vnd.api+json'
                }
            })
            .then(() => {

                // Transistion to the change-password-success route.
                this.transitionToRoute('clients.change-password-success');
            })
            .catch((ex) => {

                // Set the errors property to the errors held in the ex.payload.errors.  This will allow the errors to be shown in the UI.
                this.set('errors', ex.payload.errors);
            });
        }
    }
}

型号

更改密码.js

import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/abc-authenticated-route-mixin';

export default Route.extend(AbcAuthenticatedRouteMixin, {
//export default class ChangePasswordRoute extends Route(AbcAuthenticatedRouteMixin, {

    model() {

        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    },
})
46qrfjad

46qrfjad1#

@glimmer/component中没有onsubmit方法,因此您无法在元件的动作内呼叫this.onsubmit
首先,你需要将控制器中创建的动作传递给你的组件。这可以像这样完成:
<ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} />
记住,你不能再在一个glimme组件中传递数据了,你需要使用一个action,因为所有的东西都是单向绑定的。
第二,你需要在你的glimine组件中调用这个动作:

this.args.changePassword({
  oldPassword: this.oldPassword,
  newPassword: this.newPassword,
  confirmPassword: this.confirmPassword
});

我已经为您创建了一个Ember Twiddle来演示这个示例的工作情况。

相关问题