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 在单击 link 内部回复组件时切换其可见性。

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}} 包装器。

ember中独立组件如何通信？

How do independent components communicate in ember?

ember.js

handlebars.js

ember-components