Ember 每个循环在更新数组时重新渲染整个对象数组

Question

我正在使用 Ember 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 数组中的任何对象更新时，each 循环会遍历整个数组，并且所有子组件都会重新绘制，从而导致严重的性能问题。

我发现了类似的问题，但其中 none 个问题提供了明确的解决方案。请帮忙。

Answer 1

我认为你需要在每个中设置密钥。

像这样：

https://www.emberjs.com/api/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=each

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

Ember 每个循环在更新数组时重新渲染整个对象数组

Ember Each loop rerendering entire array of objects when the array is updated

javascript

ember.js

ember-cli