ember.js - 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操作添加到子组件内的某些内容中。

在父组件中：displayReplybox: false,

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

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