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

独立组件如何在ember中进行通信？

1 个答案: