在模板 returns 中调用关系 DS.PromiseObject

Question

我将 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;
    });
  }
});

我检查当前会话电子邮件地址是否等于数据库中的电子邮件地址。和 return 用户对象。这是工作。（不知道这样做是否正确？）

在我的配置文件车把模板中，我有以下代码。

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

这 return 屏幕上显示以下内容：

frank spin <DS.PromiseObject:ember545>

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

Answer 1

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

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

模板中的 PromiseObjects

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

如果您在 promise 尚未解决时尝试呈现您的 profile 模型属性，您将得到一个空白 space。 You can display loading state information using the isPending property:

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

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

And you can also use the isRejected property to detect API failures，并允许用户重试。

渲染前加载

如果这种异步行为不是您想要的，您可以强制关系承诺在呈现模板之前在路由的 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');
  }
});

（对于更简单的单一模型，您可以在 afterModel 挂钩中编写 return model.get('profile')。）

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

在模板 returns 中调用关系 DS.PromiseObject

Calling a relationship in template returns a DS.PromiseObject

ember.js

ember-data

firebase

emberfire

模板中的 PromiseObjects

渲染前加载