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

Question

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

Answer 1

  

我真的不想移动JavaScript来实现这一点   父组件

您是否希望避免让父组件处理与Panel＆＃34; activity＆＃34;？相关的任何内容？如果是这样，为什么？*如果不是：

Ember会自动为每个组件的标记（除非它是无标记组件）提供可从js代码elementId访问的ID。您可以在父组件上创建属性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存储在调用组件中。

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

Answer 2

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

示例：

import Ember from 'ember';

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

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

示例Ember twiddle。