Question

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

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

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

或者我应该使用视图和控制器（即使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。

您可以在组件中为pub / sub机制注入事件总线服务（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/

EmberJS嵌套组件事件

1 个答案: