1

我将 firebase 与 Ember CLI 结合使用。我有以下设置：

ember.debug.js:6401 DEBUG: Ember      : 2.4.5
ember.debug.js:6401 DEBUG: Ember Data : 2.5.1
ember.debug.js:6401 DEBUG: Firebase   : 2.4.2
ember.debug.js:6401 DEBUG: EmberFire  : 1.6.6
ember.debug.js:6401 DEBUG: jQuery     : 2.2.3

我有两个简单的模型

<!-- app/models/user.js -->
import Model from 'ember-data/model';

export default Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  email: DS.attr('string'),
  profile: DS.belongsTo('profile', {async: true})
});

我的个人资料的第二个模型

<!-- app/models/profile.js -->
import Model from 'ember-data/model';

export default Model.extend({
  companyName: DS.attr('string'),
  user: DS.belongsTo('user', {async: true})
});

我有以下个人资料路线：

<!-- app/routes/profile.js -->
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.query('user', { orderBy: 'email', equalTo: this.get('session.currentUser.email')}).then(function(user){
      console.log(user);
      return user;
    });
  }
});

我检查当前会话电子邮件地址是否等于数据库中的电子邮件地址。并返回用户对象。这是有效的。（不知道这是否是正确的做法？）

在我的个人资料车把模板中，我有以下代码。

<!-- app/templates/profile.hbs -->
{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}
  {{user.profile}}
{{/each}}

这将在屏幕上返回以下内容：

frank spin <DS.PromiseObject:ember545>

我的猜测是尚未收到关系数据。我不知道如何解决这个问题。第二个问题：我检查当前登录用户的方式是否正确？

4

1 回答 1

1

您是正确的，尚未收到关系数据。但是，如果您像这样编写模板，则在加载时您仍然应该看到配置文件信息：

{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}
  {{user.profile.companyName}}
{{/each}}

模板中的 PromiseObjects

Promise 对象（和 Promise 数组）的目标是允许您在 Ember 加载之前绑定数据，并在 Promise 解决后更新这些绑定。这对于次要重要性信息非常有用，可以在页面的其余部分加载后安全地呈现。

profile如果您在承诺尚未解决时尝试渲染模型属性，您将得到一个空白区域。您可以使用属性显示加载状态信息isPending：

{{#each model as |user|}}
  {{user.firstName}}
  {{user.lastName}}

  {{#if user.profile.isPending}}
    <span class="spinner">…&lt;/span>
  {{else}}
    {{user.profile.companyName}}
  {{/if}}
{{/each}}

并且您还可以使用该isRejected属性来检测 API 故障，并允许用户重试。

渲染前加载

如果这种异步行为不是您想要的，您可以在将模板渲染到afterModel路由的钩子中之前强制解决关系承诺：

export default Ember.Route.extend({
  model() {
    return this.store.query('user', { orderBy: 'email',
      equalTo: this.get('session.currentUser.email')});
  },

  afterModel(users) {
    return Ember.RSVP.all(users.invoke('get', 'profile');
  }
});

（使用更简单的单一模型，你可以直接写return model.get('profile')在afterModel钩子里。）

从返回的任何承诺afterModel都将阻止路由的加载，直到它解决。然后，您的模板在渲染时将始终具有可用的用户配置文件。

于 2016-04-16T11:51:19.877 回答