1

Ember CLI と組み合わせて firebase を使用しています。私は次の設定をしています：

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

私は2つの単純なモデルを持っています

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

そして、私のプロファイルの 2 番目のモデル

<!-- 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>

私の推測では、関係データはまだ受信されていません。この問題を解決する方法がわかりません。そして 2 番目の質問: 現在ログインしているユーザーの確認は正しい方法ですか?

4

1 に答える 1

1

関係データが受信されていないことは間違いありません。ただし、テンプレートを次のように記述した場合でも、ロード時にプロファイル情報が表示されるはずです。

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

テンプレート内の PromiseObject

promise オブジェクト (および promise 配列) の目的は、データが読み込まれる前に Ember でデータをバインドし、promise が解決されるとそれらのバインディングを更新できるようにすることです。これは、ページの残りの部分が読み込まれた後に安全にレンダリングできる、二次的に重要な情報に最適です。

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、ルートのフックでテンプレートをレンダリングする前に、リレーションシップの promise を強制的に解決できます。

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フックに書き込むだけで済みます。)

から返された promise は、afterModel解決されるまでルートの読み込みをブロックします。そうすれば、テンプレートには、レンダリング時に利用可能なユーザーのプロファイルが常に含まれます。

于 2016-04-16T11:51:19.877 に答える