ember中独立组件如何通信？

Question

如何让独立组件知道组件中的更改或事件？

例如：

 <#user-social profile>
  {{partial 'user-handle'}}

  <div class='subtext'> 
    {{#reply-component}} {{/reply-component}}
  </div>

  <div class='replybox hide'>
    <textarea></textarea>
    <input type='button' value='Reply to user' />
  </div>
 </user-social profile>

问题：我希望replybox 在点击回复组件中的链接时切换其可见性。

Answer 1

组件在设计上是隔离的。您有责任指定它们的依赖关系。您可以通过将绑定属性传递给子组件或指定子组件在父组件上触发的操作来在父组件和子组件之间引入通信通道。

动作可能更合适，因为使用双向绑定作为一种通信形式越来越多地被认为是一种反模式。一个例子：

{{#reply-component toggleReplybox="toggleReplybox"}}

然后，在您的子组件中：

actions: {
  whateverTriggersTheToggle: function() {
    this.sendAction('toggleReplybox');
  }
}

您必须将 whateverTriggersTheToggle 操作添加到子组件内的某些内容中。

在父组件中： 显示回复框：假，

actions: {
  toggleReplybox: function() {
    this.set('displayReplybox', !this.get('displayReplybox'));
  }
}

这需要在 replybox 元素周围添加一个 {{#if displayReplybox}} 包装器。