所有Ember组件实例共享变量的最佳方法是什么？

Posted 2021-05-06

我有一个Ember组件，它本质上是一个面板。页面上可以有多个此面板的实例，但在任何给定时间只能有一个“活动”。如果任何其他面板变为“活动”，则组件的每个实例都必须知道它们可以移除它们的“活动”状态。我真的不想移动javascript来使这种情况发生在父组件上。相反，我想将它保留在这个组件中。在Angular中，我曾经使用静态变量来执行此操作。在恩伯最好的方法是什么？

答案

我真的不想移动JavaScript来使这种情况发生在父组件上

您是否希望避免让父组件处理与面板“活动”相关的任何内容？如果是这样，为什么？*如果不是：

Ember自动为每个组件的标签（除非它是无标签组件）提供一个id，可以从js代码访问elementId。您可以在父组件上创建属性activePanelId并将其传递给所有面板：{{pa-nel activePanelId=activePanelId}}然后检入每个面板

{{#if (eq elementId activePanelId)}}
  {{!whatever is different on the active panel}}
{{/if}}

或者在js代码中使用它：

isActive: Ember.computed('activePanelId', function() {
    return this.get('activePanelId')===this.get('elementId');
},

如果面板通过与其自身相关的动作变为活动状态（例如，单击它），只需在相应的动作中将activePanelId设置为elementId - 因为属性activePanelId仅在父组件上存在一次，所以通过它的所有其他面板将做记录。

如果使用elementId感觉hacky，你可能会给每个面板一个不同的名称，并将activePanelName存储在调用组件中。

*如果你真的不想要父组件中的属性，你可以将它移动到一个服务，然后注入面板组件，但我还不能想象一个更好的理由。

另一答案

@ arne.b的anwser总结得很好，是使用公共父数据处理组件状态的最佳方法，但是如果你对不使用父组件已经认真，那么有一种方法可以完成它。

例：

import Ember from 'ember';

export default Ember.Component.extend({
   sharedObject: {},
   sharedArray: [],
});

在上面的组件中，您可以使用sharedObject或sharedArray与组件的多个实例交换状态。对象或数组中的任何更改都将反映到同一组件的所有实例中。

一个样本Ember twiddle。