テンプレートでAPI（Store）からデータを表示 - 検索されたレコードをレンダリングできません

Question

サービスを使用してデータを要求した後、サービスがコンポーネントに挿入されます。データは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'}    
     ] 
    }; 
    }); 

Iは、取り出されたデータではない別のサービス及びコンポーネントと同様の問題を抱えています配列ではなくオブジェクトです。

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

実際に非同期リクエストがAPIモックに送信されたときに、私は手動で値をapp initにストアするときにすべてうまく動作しましたが、実際の非同期リクエストがAPIモックに送信されたときは機能しません。

Answer 1

ここでの問題は、私のアダプタ用のJSON形式が間違っていたことです（一部の変数は下線の代わりにハイフネーションされていると思います）。

これは、APIからサービスにデータを読み込む正しい方法ではありません。今私はルート/ application.jsモデル（）フックにデータをロードし、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()) 
    }, 

そしてサービスでは、計算されたプロパティに頼って、どんな約束なしで使用することができます。いずれにも使用する必要が.content

// services/notificationService.js 

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

そしてもちろんありませんコントローラまたはテンプレート。