템플릿에서 API (Store)의 데이터 표시 - 검색된 레코드를 렌더링 할 수 없음

Question

서비스를 사용하여 데이터를 요청한 다음 서비스가 구성 요소에 삽입됩니다. Ember Mirage에서 데이터를 검색합니다.

제 문제는이 속성이 computedProperty에서 사용될 때 computaticallyProperty가 올바르게 계산되고 표시 되더라도 데이터를 속성으로 표시 할 수 없다는 것입니다. 엠블럼에

구성 요소 템플릿 :

.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 모의로 전송되면 작동하지 않습니다.

Answer 1

내 어댑터에 대한 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()) 
    }, 

그리고 서비스는 다음 계산 특성에 의존, 어떤 약속없이 사용할 수 있습니다 : 어떤에서 사용 할 필요가 .content

// services/notificationService.js 

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

물론 전혀 컨트롤러 또는 템플릿.