Как лучше всего использовать переменную для всех экземпляров компонента Ember?

Я действительно предпочел бы не перемещать JavaScript, чтобы это произошло с родительским компонентом.

Вы хотите избежать того, чтобы родительский компонент имел дело с чем-либо, связанным с «активностью» панели? Если да, то почему?* Если нет:

Ember автоматически присваивает тегу каждого компонента (если это не компонент без тегов) идентификатор, который доступен из кода 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 кажется хакерским, вы можете также дать каждой панели отдельное имя и сохранить activePanelName в вызывающем компоненте.

* Если вам действительно не нужно свойство в родительском компоненте, вы можете переместить его в службу, которую затем внедрите в компоненты панели, но я пока не могу представить веских причин для предпочтения этого.

@arne.b anwser резюмирует это довольно хорошо, лучший способ обработки состояния компонента с общими родительскими данными, но если вы серьезно относитесь к тому, чтобы не использовать родительский компонент, есть способ сделать это.

Пример:

import Ember from 'ember';

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

В приведенном выше компоненте вы можете использовать sharedObject или sharedArray для обмена состоянием с несколькими экземплярами компонента. Любые изменения в объекте или массиве будут отражены во всех экземплярах одного и того же компонента.

Пример Ember twiddle.