Javascript 余烬每个循环在更新数组时重新命名整个对象数组

我使用的是余烬1.13.15

我有一个包含嵌套对象的对象数组，它使用每个循环进行迭代，并传递给子组件

//parent.hbs

{{#each configData as |item index|}}

    {{ my-child
        childId=(concat item.name index)
        childName= item.name
        childColor=item.color
        childEnabled=item.enabled
        actionUpdateParent='action1'
    }}

以及组件内部的以下观察者

//parent.js

configDataObserver: function(){

    var configData = this.get('configDataFromSource');

    this.set( 'configData' , configData );

}.observes('configDataFromSource'),

现在，每当更新configData阵列中的任何对象时，每个循环都会贯穿整个阵列，所有子组件都会被重新绘制，从而导致严重的性能问题

---

我发现了类似的问题，但没有一个能提供明确的解决方案。请帮忙。

我想您需要在每个按钮中设置键

像这样：

---

您可以在此处替换整个对象：this.set'configData'，configData；。在这种情况下，重新绘制整个内容是正确的-余烬不知道具体元素发生了什么变化。使用ArrayProxy和更新可能会有所帮助，尽管我自己没有测试这种情况。@GennadyDogaev，是的，我知道我正在替换整个对象，我只是想知道是否有任何余烬方法可以轻松地更新数组而不实际替换它。不过我会仔细考虑你的建议，谢谢！我尝试并发现@NullVoxPopuli的解决方案神奇地工作！以下是指南中的wrtitten：key选项用于告诉Ember如何确定使用{{each}迭代的数组在渲染之间是否发生了更改。通过帮助Ember检测数组中的某些元素是相同的，DOM元素可以重复使用，显著提高了渲染速度。你让我免于长期的头痛。我为几乎所有我能想到的元素添加了一个键，但没有效果，但我不知道应该向循环本身添加一个键

{{#each configData key="name" as |item index|}}