Search code examples
ember.jsember-data

ember: computed property on ember-data store

I am setting up a "saved item" feature for logged-in users. I have the modeling worked out already (it relates the saved item list to both the user and products). But I am having trouble with how to have a computed property on my saveditem model. The model:

// saveditem.js model
export default DS.Model.extend({

    user: belongsTo('user'),
    product: belongsTo('product'),
    dateAdded: attr('string')

});

I am currently using the product id as the id of that model.

I need a computed property on that model because anytime a product is shown on the site, the UI needs to reflect whether the item is already in the saveditem ember-data store or not.

Example of if the item is not on the list (but can be added): enter image description here

Example of an item that is on the list (but can be removed): enter image description here

I was thinking that on my userprofile service which manages the user's data across the app, I could have a computed property that outputs an array of ids from the saveditem model:

savedItemsList: computed('WHAT.IS.DEPENDENT.KEY?.[]', function() {
    return this.get('store').peekAll('saveditem').map(item => item.id);
}),

And then in the template I could use a composable helper to see if the item being displayed is in the list or not:

{{#if (contains product.id userprofile.savedItemsList)}}
    ...show already-saved button...
{{else}}
    ...show save button...
{{/if}}

The question: what would the dependent key be for this computed property? OR...is this method stinky and and there's a better way to do it?

I have tried:

savedItemsList: computed('store.saveditem.[]', function() {

(after of course injecting the store). Seems like the obvious one but it doesn't update when records are added or removed from the saveditem store. Also tried 'store.saveditems.[]', permutations with and without array brackets, and NO dependent key - all no worky.

Makes me wonder whether this is not possible for a good reason ;) I might be "fighting the framework" here. Any help appreciated!

Solution

  • You can introduce computed property which will return all the items in the store and use that property for your savedItemsList computed property.

    allSavedItemsList: computed(function() {
    return this.get('store').findAll('saveditem');
}),

savedItemsList: computed('allSavedItemsList.[]',function() {
    return this.get('store').peekAll('saveditem').map(item => item.id);
}),