同级组件如何在Ember.js中相互通信？

Question

我希望同级的Ember.js组件能够互相通信，例如，在任何给定时间，只有一个组件处于活动状态。

Answer 1

One useful pattern for handling this is to introduce an attribute on the invoking controller or component which remembers which child component is active, pass that to the component, and then check in the component to see if that attribute is itself:

PARENT CONTROLLER AND TEMPLATE

// thing/controller.js

// Remember which item is active.
// This will be changed by changeActive action, and passed to components.
activeItem: null,

actions: {
  // Change active item. Passed to component as handler for 'action'.
  changeActive(item) { this.set('activeItem', item); }
}

{{! thing/template.js }}

{{#each items as |item|}}
  {{item-component item=item active=activeItem action='changeActive'}}
{{/each}}

INDIVIDUAL ITEM COMPONENT LOGIC AND TEMPLATE

// components/item-component/component.js

// Give this component a disabled class if not the active item.
classNameBindings: ['isMe'::disabled'],

// Current active item--passed as attribute.
active: null,

// Check is I am the active item.
isMe: Ember.computed('active', function() { 
  return this === this.get('active'); 
}),

// Advise upstream that I have become active.
actions: {
  select() { this.sendAction('action', this); }
}

{{! components/item-component/template.js }}

Hello, I am item {{item.name}}. 
<span {{action 'select'}} Select me.</span>