firebase - EmberJS + Firebase：返回的自定义用户信息应该更新 UI

问题描述

总结： 我用 EmberJS、EmberFire 和 Firebase 构建了一个简单的应用程序。到目前为止，我对连接感到满意，并且能够在 Firebase 中生成自定义用户配置文件。创建后，我将返回自定义对象，并且可以在控制台中看到该信息。但是，我还不能利用这些数据来更新页面以显示他们的个人资料，而不是使用表格来完成他们的个人资料。

相关包安装 firebase, torrii, ember-paper, emberfire, ember-truth-helpers, Google authentication

模板

{{#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;
    }
},
});

问题一旦用户完成表单并在 Firebase 中创建了用户和角色用户，返回的用户数据应该允许用户现在看到他们的个人资料而不是表单。我错过了什么？此外，似乎只创建了一种 roleUser 类型。如果您需要更多信息，请告诉我

标签： firebaseember.jsemberfire

firebase - EmberJS + Firebase：返回的自定义用户信息应该更新 UI

问题描述

解决方案

推荐阅读