0

サービスを使用してデータを要求すると、そのサービスがコンポーネントに挿入されます。データは Ember Mirage から取得されます。

私の問題は、このプロパティがcomputedPropertyで使用されている場合でも、データをプロパティとして表示できないことです。computedPropertyは正しく計算して表示します。

エンブレムのコンポーネント テンプレート:

.notifications-number {{notificationService.countUnread.content}}
each notificationService.notifications.content as |notification|
  span {{notification.text}}

通知サービス:

import Ember from 'ember';

export default Ember.Service.extend({
  store: Ember.inject.service('store'),

  // render bugs out
  notifications: function() {
    return this.get('store').findAll('notification')
  }.property(),

  // renders correctly
  countUnread: function() {
    return DS.PromiseObject.create({
      promise: this.get('notifications').then((notifications) => {
        return notifications.get('length')
      })
    });
  }.property(),
});

ミラージュ構成:

this.get('/notifications', () => {
    return {
      data: [
        {id: 1, type: 'notification', text: 'hi im notification', link: ''},
        {id: 2, type: 'notification', text: 'hi im notification 2', link: 'google.com'}            
      ]
    };
  });

取得したデータが配列ではなくオブジェクトである別のサービスとコンポーネントでも同様の問題があります。

  • {{myService.myProperty}}レンダリング<(subclass of Ember.ObjectProxy):ember404>
  • {{myService.myProperty.content}}レンダリング<my-app@model:myModel::ember580:1>
  • {{myService.myProperty.content.myModelField}}何もレンダリングしません。

アプリの初期化時にストアに手動で値を設定するとすべて正常に機能しましたが、実際の非同期リクエストが API モックに送信されると機能しません。

4

1 に答える 1

0

ここでの問題は、アダプターの JSON 形式が正しくないことでした (いくつかの変数がアンダースコアではなくハイフンでつながれていたと思います)。

ただし、これは API からサービスにデータをロードする正しい方法ではありません。今、最善の方法は、routes/application.js model() フックでデータをロードし、setupController() でサービスにプッシュすることだと思います。これが今の様子です：

  // routes/application.js

  model() {
      return Ember.RSVP.hash({
        user: this.get('store').queryRecord('user', {}),
        notifications: this.get('store').findAll('notification', { reload: true })
      })
  },

  setupController(controller, model) {
    this._super(...arguments)

    if (model)
      this.set('notificationService.notifications', model.notifications.sortBy('createdAt').reverse())
  },

そしてサービスでは、計算されたプロパティに依存して、約束なしで使用できます。

  // services/notificationService.js

  countUnread: function() {
    let notifications = this.get('notifications')
    if (notifications)
      return notifications.filterBy('read', false).get('length')
  }.property('notifications')

もちろん.content、コントローラーやテンプレートで使用する必要はありません。

于 2017-02-24T06:55:13.570 に答える