EmberJS + Firebase: возвращенная пользовательская информация должна обновлять пользовательский интерфейс

Question

РЕЗЮМЕ: Я создал простое приложение с EmberJS, EmberFire и Firebase. Я доволен связями до сих пор и смог создать собственный профиль пользователя в Firebase. После создания я возвращаю пользовательский объект и вижу эту информацию в консоли. Однако я еще не смог использовать эти данные для обновления страницы, чтобы отобразить их профиль вместо формы для заполнения их профиля.

Установлены соответствующие пакеты firebase, torrii, ember-paper, emberfire, ember-true-helpers, Google аутентификация

шаблон

{{#if firebaseUser}}

    <div class="container">
        <h3>{{firebaseUser.displayName}}</h3>
        <img src="{{ firebaseUser.profilePic }}">
        <p>Your custom data 1: {{firebaseUser.customData1}}</p>
        <p>Your custom data 2: {{firebaseUser.customData2}}</p>
        {{#if firebaseUser.role}}
            <p>Special because: {{firebaseUser.uniqueAttributeA}}</p>
        {{else}}
            <p>Special because: {{firebaseUser.uniqueAttributeB}}</p>
        {{/if}}
    </div>

{{else}}

    <div class="container">
        <h3 class="center">Complete profile</h3> 
        {{#paper-form onSubmit=(action "createProfile") as |form|}}
            <div>
                {{#paper-select
                    disabled=disableSelect
                    label="Role"
                    options=roleOptions
                    selected=userRole
                    required=true
                    onChange=(action (mut userRole))
                    as |role|
                    }}
                    {{role}}
                {{/paper-select}}
                {{#paper-select
                    disabled=disableSelect
                    label="1st Data"
                    options=customData1Options
                    selected=dataOne
                    required=true
                    onChange=(action (mut dataOne))
                    as |customData1|
                    }}
                    {{customData1}}
                {{/paper-select}}
                {{#paper-select
                    disabled=disableSelect
                    label="2nd Data"
                    options=customData2Options
                    selected=dataTwo
                    required=true
                    onChange=(action (mut dataTwo))
                    as |customData2|
                    }}
                    {{customData1}}
                {{/paper-select}}
                {{#if (eq userRole 'roleA')}}
                    {{#paper-select
                        disabled=disableSelect
                        label="Rate"
                        options=rateOptions
                        selected=userRate
                        onChange=(action (mut userRate))
                        as |rate|}}
                        {{rate}} mph
                    {{/paper-select}}
                {{/if}}
                {{#paper-checkbox value=tosAgreement onChange=(action (mut tosAgreement)) required=true}}
                    Check if you agree to the <a href="/tos">Terms of Service</a>
                {{/paper-checkbox}}
            </div>
            <div class="center">
                {{#form.submit-button raised=true primary=true}}Submit{{/form.submit-button}}
            </div>
        {{/paper-form}}
    </div>

{{/if}}

<br>
<hr>
<br>

<button {{action "signOut"}}>{{#paper-button}}Sign out{{/paper-button}}</button>

маршрут

import Route from '@ember/routing/route';
export default Route.extend({

model: function() {
    if (this.get('session.currentUser.uid')) {
        let record = this.get('session.currentUser.uid');
        let firebaseUser = this.store.findRecord('people', record).then(function(firebaseUser) {
            console.log('Firebase userID: ' + firebaseUser.id);
            console.log('Firebase role: ' + firebaseUser.role);
            return firebaseUser;
        }, function(error) {
            console.error(error);
            console.log('User does not exist');
        });
    }
}});

контроллер

import Controller from '@ember/controller';

const roleOptions = ['RoleA','RoleB'];
const customData1Options = ['Option1','Option2'];
const customData2Options = ['OptionA','OptionB','OptionC'];
const rateOptions = [1,2,3,4,5];

export default Controller.extend({

roleOptions, customData1Options, customData2Options, rateOptions,

actions: {
    createProfile: function() {
        console.log('Creating profile');

        var userRole = this.get('userRole');
        var customData1 = this.get('customData1');
        var customData2 = this.get('customData2');

        if (userRole == 'RoleA') {
            var role = false;
            var rate = this.get('userRate');
        } else {
            role = true;
        }

        if (customData1 == 'Option1') {
            var customData1 = 0;
        } else {
            customData1 = 1;
        }

        if (customData2 == 'OptionA') {
            var customData2 = 0;
        } else if (customData2 == 'OptionB') {
            customData2 = 1;
        } else {
            customData2 = 2;
        }

        var newUser = this.store.createRecord('people', {
            id: this.get('session.currentUser.uid'),
            name: this.get('session.currentUser.displayName'),
            profilePic: this.get('session.currentUser.photoURL'),
            role: role,
            customData1: customData1,
            customData2: customData2,
            created: new Date().getTime()
        newUser.save();
        console.log(newUser);

        if (role == true) { 
            console.log('Creating role A user');
            var newUserA = this.store.createRecord('usertypea', {
                id: this.get('session.currentUser.uid'),
                name: this.get('session.currentUser.displayName'),
                profilePic: this.get('session.currentUser.photoURL'),
                customData1: customData1,
                customData2: customData2,
                uniqueAttributeA: 42
            });
            newUserA.save();
            console.log(newUserA);

        } else {
            console.log('Creating role B user');
            var newUserB = this.store.createRecord('usertypeb', {
                id: this.get('session.currentUser.uid'),
                name: this.get('session.currentUser.displayName'),
                profilePic: this.get('session.currentUser.photoURL'),
                customData1: customData1,
                customData2: customData2
                uniqueAttributeB: somethingCool
                rate: rate
            });
            newUserB.save();
            console.log(newUserB);
        }
        return newUser;
    }
},
});

Вопрос: Как только пользователь заполняет форму, а пользователь и roleUser создаются в Firebase, возвращенные пользовательские данные должны позволить пользователю теперь видеть свой профиль вместо формы. Что мне не хватает? Также создается впечатление, что создается только один из типов roleUser. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация

Answer 1

Некоторые проблемы, которые я вижу в вашем коде:

1. Чтобы что-то было доступно в шаблоне, оно должно быть определено на контроллере. Вы не определяете firebaseUser в контроллере.
2. Хук модели не будет вызван после аутентификации. Эмбер звонит один раз за посещение страницы или если вы звоните refresh метод маршрута.
3. Крючок модели должен вернуть обещание, ваш крючок модели ничего не возвращает

Вы читали официальный путеводитель по ember? Если нет, это первое, что вы должны сделать, прежде чем приступить к разработке приложения.

Что касается проблемы, которую вы пытаетесь решить, тории есть session Сервис, который предназначен для хранения и отображения статуса аутентификации. Кроме того, этот пост, кажется, имеет некоторую информацию по этому вопросу