Ember Octane Как получить доступ к данным модели в компоненте - PullRequest
Новая
       2

Ember Octane Как получить доступ к данным модели в компоненте

1 голос
/ 06 апреля 2020

Я обновляюсь с Ember Classi c до Ember Octane 3.17.0.

Вопрос:

Как получить доступ к данным модели в компоненте?

Контекст:

Я пытаюсь разрешить сброс пароля. Это отправляет строку URL на электронную почту пользователя. Когда они нажимают на ссылку, я могу запросить строку и загрузить userId и токен в модель. Однако я не могу получить доступ к данным модели в компоненте. В Classi c я достиг этого с помощью метода didReceiveAttrs, который сейчас не рекомендуется. Документация предлагает использовать геттеры, но я не знаю, как это сделать.

См. Код ниже.

Примечание: Я не поместил это в 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); 
            });
        }
    }
}

1 Ответ

1 голос
/ 06 апреля 2020

Вы можете получить данные модели в компоненте, инициализируя свой атрибут с помощью this.args 

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

и в шаблоне компонента 

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