EmberJS嵌套组件事件

Question

我正在使用EmberJS CLI,我试图围绕组件.但是我不太明白他们之间沟通的最佳方式是什么.我正在尝试使用侧面菜单和画布制作一个简单的图形编辑器.我有一个"图形编辑器"组件,其中包含"side-menu"和"editor-canvas"组件作为子项.如果我在"侧面菜单"组件中选择"插入文本"等选项,如何告诉"编辑器画布"添加一些文本？

我听说过行动,数据下降.所以我应该将侧面菜单模型传递给画布进行观察(我可能还有一个菜单栏,可以告诉画布稍后再做一些事情,所以我也必须以某种方式观察)？因此,只要侧面菜单上的操作发生,它的模型就会更新,画布可以观察到它并对其进行更改吗？

或者是否有一种干净的方法将侧面菜单操作冒泡到父编辑器组件,然后捕获它并在画布组件上调用操作？

或者我应该使用视图和控制器(即使EmberJS似乎引导人们远离它们)而不是组件.那么图形编辑器的控制器可以捕获一个动作并使用controllerFor将它传递到editor-canvas上？

或者我应该使用Ember.Evented？

在我的主应用程序模板中,我有:

{{graphics-editor model=model}}

我的图形编辑器(graphics-editor.hbs)组件如下所示:

<div class="ui-layout-north nopadding">
  {{file-menu menuItems=model.fileMenu.menuItems}}
</div>
<div class="ui-layout-west">
  {{side-menu addLabel='addLabel'}}
</div>
<div class="ui-layout-center nopadding emptyBackground">
  {{editor-canvas canvasModel=model.canvas}}
</div>
<div class="ui-layout-south nopadding">
  {{editor-footer}}
</div>

Answer 1

保留组件.在这种兄弟组件相互传递相当多的情况下(侧面菜单和画布),我认为它值得使用Ember.Evented.

您可以Ember.Service.extend(Ember.Evented)在组件中为事件/子机制注入事件总线服务().例如,在您的侧边菜单组件中:

eventBus: Ember.inject.service(),

actions: {
    insertText: function(text) {
      this.get('eventBus').trigger('insertText', text);
    }
    ...
}

canvas组件将被订阅.

我最近写过关于这个主题的文章:http://emberigniter.com/parent-to-children-component-communication/