Ember 组件之间的通信

Question

我正在开发一个网络应用程序来显示和搜索文档。我已经像这样布置了主包装器 div：

<div class="wrapper">
    {{searchComponent searchComponent=searchComponent}}
    {{pdfViewer pdfSearchComponent=searchComponent}}
</div>

这允许我稍后在其中添加其他类型的查看器，如下所示：

{{otherViewer otherSearchComponent=searchComponent}}

外包装也是一个 ember 组件。所以它的控制器看起来像：

Ember.controller.extend({
   searchComponent: null,
   .
   .
   otherProperties,
   actions: { }
});

并且搜索组件在初始化时绑定自身，灵感来自于此来源：http://www.samselikoff.com/blog/getting-ember-components-to-respond-to-actions/

Ember.controller.extend({
    searchComponent: null,
    .
    .
    onStart: function(){
       this.searchComponent = this;
    }.on('init'),
    .
    .
    actions: {
        someAction: function() {
            //do something
        }
    }
}

所以我现在可以像这样从主 pdfViewer 引用组件：

this.get('searchComponent').send('someAction')

为了获得响应，我现在将另一个属性绑定到所有控制器/模板，然后在查看器控制器中观察那个属性的变化，之后我可以放置结果在他们需要的地方。

有没有办法将 'message' 从我的 'pdfViewer' 发送到我的 'searchComponent' 并接收 'response' 而无需像上面那样将它们显式绑定在一起？

Answer 1

您可以考虑通过 Service 事件总线使用 pub/sub，其中您的 searchComponent 和 pdfViewer 都发出和侦听消息，因此可以与每个人交谈其他。当然，对服务有依赖性，但据我所知，您的组件无论如何都是特定于应用程序的。

类似于：

_listen: function() {
  this.get('eventBus').on('message', this, 'handleMessage');
}.on('init'),

actions: {
  click() { this.get('eventBus').trigger('message', message); }
}

几周前，我评估了几种父子组件通信的方法：http://emberigniter.com/parent-to-children-component-communication/，也许这会有所帮助。

Ember 组件之间的通信

Ember Communication Between Components

handlebars.js

ember.js