Question

我有一个（Ember-CLI 1.13.1）数组，我循环使用一个组件显示该数组的项目。当我向该数组添加项目时，我希望渲染新项目，但现有项目保持不变。但是，我看到的是数组中的所有项目都被重新渲染。

我的印象是只有新的/更改/删除的项目会导致重新渲染？否则，这是潜在的（在我的应用程序中，我们使用一大堆嵌套组件渲染数百个复杂项目）大量浪费的处理和渲染时间导致性能缓慢和用户暂停。

我在这里做错了吗？或者这是Ember的预期行为？

这个简单的例子清楚地显示了重新渲染：

的application.js

export default Ember.Controller.extend({

    data : Ember.A([]),

    actions :
    {
        addData : function()
        {
            var data = this.get("data");

            data.addObject({label:data.length});
        },
    }
});

测试component.js

export default Ember.Component.extend({

    getlabel : function()
    {
        var item = this.get("item");

        Ember.Logger.log("getlabel",item.label);

        return item.label + " " + new Date;

    }.property('item.label'),

});

application.hbs

<button {{action 'addData'}}>Add</button>

{{#each data as |item|}}

    {{test-component item=item}}

{{/each}}

测试component.hbs

{{getlabel}}

每次单击该按钮都会向该数组添加一个对象，该application.bhs会循环显示该列表。正如你所看到的，getLabel函数绑定在item.label上，所以由于这不会随着项目的添加而改变，所以我不希望在添加项目时再次运行它。但是，正如您将从日志中看到并在屏幕上查看时间戳更改，将重新调用它，并在项目添加到阵列时重新呈现组件内容。

在此处查看此行动：http://ember-twiddle.com/a37e6128cc07fdf3a202

所以，总结一下：

1）当我向数据添加新项目时，为什么Ember会为数据中的每个项目重新渲染测试组件？

2）有没有办法阻止它这样做，所以只重新渲染插入/删除/替换的项目？

添加到数组会导致重新呈现数组中的所有项

0 个答案: