如何检测 Ember.js 中数组的变化？

Question

我正在使用 Ember 2.12。

我在控制器中有一个数组selectedDays: [Object] 传递给组件。组件有一个类似monthDays: [Object] 的数组。如果组件中的对象可以在控制器的数组中找到，则需要设置selected 属性。

问题是基于 Moment 库方法 (moment1.isSame(moment2, 'day')) 比较对象的成本非常高。所以现在当我向selectedDays 数组添加一些东西时，monthDays 中的每个对象都需要与selectedDays 中的每个对象进行比较。这可能是成百上千次代价高昂的比较。

monthDays 总是有 42 个长度（6 周），但 selectedDays 可以是几十个或几百个。

我想知道是否可以在没有一些蛮力自定义排序/查找优化的情况下对其进行优化。

最简单的解决方案是：在控制器阵列更改时，检查确切更改的内容并仅修改与更改匹配的一天。但据我所知：

• 您无法将操作从控制器发送到组件
• 数组观察者不“知道”数组中究竟发生了什么变化 (?)

我还有什么其他选择？

我设置了一个 Ember Twiddle，在它被选中前一天，每次点击都会出现 200-300 毫秒的延迟。

Answer 1

当您更改控制器中的 selectedDays 时，您知道 object 您要添加/删除吗？如果是这样，那么您可以将该 newAddedDays 对象传递给组件，并在组件 didUpdateAttrs 钩子中，您可以检查 newAddedDays 并在组件中设置 selected 属性。

{{my-component selectedDays=selectedDays newlyAddedDays=newlyAddedDays }}

最初newlyAddedDays 将为空/未定义。

my-component.js 文件，

import Ember from 'ember';
export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        //prepare selected property using the selectedDays from controller and monthdDays in component.
    },
    //this hook will not be called for first render.
    //It will be called whenever you change selectedDays/newlyAddedDays. ie, whenever the passed property is updated 
    didUpdateAttrs() {        
        if (Ember.isPresent(this.get('newlyAddedDays'))) {
            //look for it and update selected property.
        }
    }

});

根据您的选择，

你不能将动作从控制器发送到组件

不要这样做。相反，您可以尝试使用具有修改后属性的服务，组件将从那里获取它。

数组观察者不“知道”数组到底发生了什么变化

是的。数组观察者不知道具体发生了什么变化，因此您必须编写获取差异的代码。