How to trigger didReceiveAttrs in Ember component

Question

Using version 2.17. I have an Ember component inside an /edit route with a controller:

// edit.hbs
{{ingredient-table recipe=model ingredients=model.ingredients}}

Inside my component, I am using a didRecieveAttrs hook to loop through ingredients on render, create proxy objects based off of each, and then build an ingredient table using those proxy objects.

// ingredient-table.js

didReceiveAttrs() {
  let uniqueIngredients = {};

  this.get('ingredients').forEach((ingredient) => {
    // do some stuff
  })

  this.set('recipeIngredients', Object.values(uniqueIngredients));
}

I also have a delete action, which I invoke when a user wishes to delete a row in the ingredient table. My delete action looks like this:

// ingredient-table.js

deleteIngredient(ingredient) {
  ingredient.deleteRecord();

  ingredient.save().then(() => {
    // yay! deleted!
  })
}

Everything mentioned above is working fine. The problem is that the deleted ingredient row remains in the table until the page refreshes. It should disappear immediately after the user deletes it, without page refresh. I need to trigger the didReceiveAttrs hook again. If I manually call that hook, all my problems are solved. But I don't think I should be manually calling it.

Based on the docs, it is my understanding that this hook will fire again on page load, and on re-renders (not initiated internally). I'm having some trouble figuring out what this means, I guess. Here's what I've tried:

1) calling ingredients.reload() in the promise handler of my save in ingredient-table.js (I also tried recipe.reload() here).

2) creating a controller function that calls model.ingredients.reload(), and passing that through to my component, then calling it in the promise handler. (I also tried model.reload() here).

Neither worked. Am I even using the right hook?

deleteRecord only marks record as deleted but doesn't save, should you use destroyRecord instead? see emberjs.com/api/ember-data/release/classes/DS.Model/methods/… — kasperite

feanor07 feanor07 · Accepted Answer · 2018-12-06T19:33:45

I suppose recipeIngredients is the items listed in the table. If that is the case; please remove the code within didReceiveAttrs hook and make recipeIngredients a computed property within the component. Let the code talk:

// ingredient-table.js

recipeIngredients: Ember.computed('ingredients.[]', function() {
    let uniqueIngredients = {};

    this.get('ingredients').forEach((ingredient) => {
        // do some stuff
    })

    return Object.values(uniqueIngredients)
})

My guess is didReceiveAttrs hook is not triggered again; because the array ingredients passed to the component is not changed; so attrs are not changed. By the way; do your best to rely on Ember's computed properties whenever possible; they are in the hearth of Ember design.

How to trigger didReceiveAttrs in Ember component

1 Answers