Ember Service To Component

Question

I have a service which I'm calling via a component using Ember.inject

app/notifications/service.js

import Ember from 'ember';

export default Ember.Service.extend({
  store: Ember.inject.service('store'),
  notifications: function() {
    return this.get('store').findAll('notification');
  },
});

Then my app/components/app-notifications/component.js:

import Ember from 'ember';

export default Ember.Component.extend({
  notifications: Ember.inject.service('notifications'),
});

Then my component template at /app/components/app-notifications/template.hbs

{{notifications}}
<ul>
  {{#each notifications as |notification|}}
     <li>{{notification.title}} <small>{{moment-from-now dateAdded}}</small>     </li>
  {{/each}}
</ul>

But I can't get it to show the data from my model? I can't seem to find much info on this in the docs, so I'm wondering if anyone knows how to do this?

Answer 1

Is it necessary to implement notifications as a service?

The common way to do the job is to use a computed property:

import Ember from 'ember';

export default Ember.Component.extend({
  notifications: Ember.computed( function () {
    return this.store.findAll('notification');
  })
});