Ember Octane 如何访问组件中的模型数据

Question

我正在从 Ember Classic 升级到 Ember Octane 3.17.0。

问题：

如何访问组件中的模型数据？

上下文：

我正在尝试允许重设密码功能。这会向用户的电子邮件发送一个 URL 字符串。当他们单击 link 时，我能够查询字符串并将 userId 和令牌加载到模型中。但是，我无法访问组件中的模型数据。在 Classic 中，我使用 didReceiveAttrs 方法实现了这一点，该方法现已弃用。文档建议使用 getter，但我不清楚它是如何完成的。

查看下面的代码。

注意：我没有把它放在 Ember Twiddle 中，因为我不知道如何；那是另一个学习曲线；我试图寻找演练但找不到。如果有人想将其加载到 Ember Twiddle 中，那么他们拥有执行此操作所需的代码。

模板组件 HBS:

<div class="middle-box text-center loginscreen animated fadeInDown">
    <div>
        <h3>Reset Password</h3>
        <form class="m-t" role="form" {{on "submit" this.resetPassword}}>
            {{#each @errors as |error|}}
                <div class="error-alert">{{error.detail}}</div>
            {{/each}}
            <Input @type="hidden" @value={{@resetPasswordModel.userId}} />
            <Input @type="hidden" @value={{@resetPasswordModel.token}} />
            <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">Reset Password</button>
            </div>
        </form>
    </div>
</div>

HBS 模板：

<Clients::ResetPasswordForm @resetPasswordModel={{this.model}} @resetPassword={{action 'resetPassword'}} @errors={{this.errors}} />

路线：

import Route from '@ember/routing/route';
import AbcUnAuthenticatedRouteMixin from '../../mixins/abc-unauthenticated-route-mixin';

export default class ResetPasswordRoute extends Route.extend(AbcUnAuthenticatedRouteMixin) {

    model(params) {

        return {
            userId: params.strUserId,   // The strUserId found in the query parameters of the reset password URL.
            newPassword: '',
            confirmPassowrd: '',
            token: params.strToken,     // The strToken found in the query parameters of the reset password URL.
        };
    }
}

组件 JS:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ResetPasswordForm extends Component {

    @tracked userId;
    @tracked newPassword;
    @tracked confirmPassword;
    @tracked token;

    @action
    resetPassword(ev) {

        ev.preventDefault();

        this.args.resetPassword({
            userId: this.userId,
            newPassword: this.newPassword,
            confirmPassword: this.confirmPassword,
            token: this.token
        });
    }
}

控制器JS：

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

export default class ResetPassword extends Controller {

    @service ajax;

    queryParams = ['strUserId', 'strToken'];
    strUserId = null;
    strToken = null;

    @action
    resetPassword(attrs) {

    if(attrs.newPassword == undefined || attrs.newPassword == null || attrs.newPassword == '' ||
        attrs.confirmPassword == undefined || attrs.confirmPassword == null || attrs.confirmPassword == '' ||
        attrs.newPassword != attrs.confirmPassword) 
        {

            this.set('errors', [{
                detail: "The new password and confirm password must be the same and their values and cannot be blank.  Reset password was not successful.",
                status: 1005,
                title: 'Reset Password Failed'
            }]);

            this.set('model', attrs);
        }
        else {

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

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

                this.set('errors', ex.payload.errors); 
            });
        }
    }
}

Answer 1

您可以通过使用 this.args

初始化您的属性来获取组件中的模型数据

@tracked userId = this.args.resetPasswordModel.userId;

并在组件模板中

<Input @type="hidden" @value={{this.userId}} />

Ember Octane 如何访问组件中的模型数据

Ember Octane How to access Model data in Component

ember.js