如何在 Ember 组件中触发 didReceiveAttrs

Question

使用版本 2.17。我在带有控制器的 /edit 路由中有一个 Ember 组件：

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

在我的组件中，我使用 didRecieveAttrs 钩子在渲染时循环 ingredients，基于每个对象创建代理对象，然后使用这些对象构建成分 table代理对象。

// ingredient-table.js

didReceiveAttrs() {
  let uniqueIngredients = {};

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

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

我还有一个 delete 操作，当用户希望删除成分 table 中的一行时，我会调用该操作。我的 delete 操作如下所示：

// ingredient-table.js

deleteIngredient(ingredient) {
  ingredient.deleteRecord();

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

上面提到的一切都工作正常。问题是删除的成分行保留在 table 中，直到页面刷新。它应该在用户删除后立即消失，无需刷新页面。我需要再次触发 didReceiveAttrs 挂钩。如果我手动调用那个钩子，我所有的问题都解决了。但我认为我不应该手动调用它。

根据文档，据我所知，此挂钩将在页面加载和重新呈现（未在内部启动）时再次触发。我想我在弄清楚这意味着什么时遇到了一些麻烦。这是我尝试过的：

1) 在 ingredient-table.js 中我的 save 的承诺处理程序中调用 ingredients.reload()（我在这里也试过 recipe.reload()）。

2) 创建一个调用 model.ingredients.reload() 的控制器函数，并将其传递到我的组件，然后在承诺处理程序中调用它。（我这里也试过model.reload()）。

都没用。我什至使用正确的钩子吗？

Answer 1

我想 recipeIngredients 是 table 中列出的项目。如果是这样的话；请删除 didReceiveAttrs 钩子中的代码，并在组件中将 recipeIngredients 计算为属性。让代码说话：

// ingredient-table.js

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

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

    return Object.values(uniqueIngredients)
})

我的猜测是didReceiveAttrs hook 没有再次触发；因为传递给组件的数组 ingredients 没有改变；所以 attrs 没有改变。顺便一提;尽可能依赖 Ember 的计算属性；他们是 Ember 设计的核心。

如何在 Ember 组件中触发 didReceiveAttrs

How to trigger didReceiveAttrs in Ember component

ember.js