Question

我正在开发一个用于显示和搜索文档的webapp。我已经像这样布置了主要的包装div：

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

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

{{otherViewer otherSearchComponent=searchComponent}}

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

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

搜索组件将自己与itialization结合起来，受到这个来源的启发：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')

要获得响应，现在我将另一个属性绑定到所有控制器/模板，然后在查看器控制器中监视该属性的更改，之后我可以将结果放在需要的位置。

有没有办法从我的'pdfViewer'向我的'searchComponent'发送'消息'并收到'响应'而没有明确地将它们绑定在一起，如上所述？

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/，也许这有点帮助。

组件之间的灰烬通信

1 个答案: