Отображение данных из API (Хранилище) в шаблоне - невозможно отобразить извлеченную запись

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

Mirage конфигурация:

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}} не делает ничего.

Все работало нормально, когда я вручную установил значения в хранилище в приложении init, но не работает, когда фактические асинхронные запросы отправляются в макет API.

Answer 1

Проблема была неправильной. Формат JSON для моего адаптера (я думаю, что некоторые переменные были переносными, а не подчеркнутыми).

Это неправильный способ загрузки данных из API в сервис. Теперь я считаю, что лучше всего загружать данные в hook/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 должен быть использован в любой контроллер или шаблон.