Question

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

已安装相关软件包 火力地堡，torrii，灰烬纸，emberfire，ember-truth-helpers，谷歌认证

模板

{{#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中创建了user和roleUser，返回的用户数据应允许用户现在查看其个人资料而不是表单。我想念什么？同样，似乎只创建了一个roleUser类型。请让我知道是否需要其他信息

Answer 1

您的代码可以看到一些问题：

对于模板中可用的内容，应在控制器上定义。您没有在控制器中定义firebaseUser。
在认证之后将不会调用模型挂钩。灰烬每次访问页面或调用refresh路由方法都调用一次。
模型挂钩应返回promise，您的模型挂钩不返回任何东西

您读过官方余烬guide吗？如果没有，那是开始开发应用程序之前您应该做的第一件事。

对于您要解决的问题，torii具有session service，用于存储和显示身份验证状态之类的东西。另外，this帖子似乎对此主题有一些信息

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

1 个答案: