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

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

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

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

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

frank spin <DS.PromiseObject:ember545>

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

Answer 1

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

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

模板中的PromiseObjects

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

如果在承诺未解决时尝试渲染profile模型属性，则会得到一个空格。 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');
  }
});

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

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

在模板中调用关系会返回DS.PromiseObject

1 个答案:

模板中的PromiseObjects

渲染前加载