Ember中组件之间的通信

Question

我有一个包含两个组件的模板，一个文件上传组件和一个显示上传进度的进度条。

{{file-upload}}
{{ember-progress-bar progress=progress}}

我正在使用ember-uploader。我试图像这样设置进度条的进度：

uploader.on('progress', e => {
    // send progress to other component
});

我已经读过您应该使用操作来在组件之间进行通信，但我只能在上传组件的filesDidChange函数中访问该进度值，所以我不认为我可以将其发送到一种行为。将此进度值发送到进度条组件的最佳方法是什么？

Answer 1

这是我使用上下文组件为没有父子关系的组件启用组件间通信的地方（一个不在其模板中呈现另一个组件）。

请查看以下twiddle我已为您准备好说明我的意思。我创建了模拟ember-progress-bar和file-upload组件。我当然使用filesDidChange函数代替click函数来模拟file-upload组件，我决定将screenX和screenY值发送到鼠标单击事件以ember-progress-bar组件作为进度。

ember-progress-bar用作application.hbs中的上下文组件;其中ember-progress-bar在其模板中产生progressUpdated {{yield (hash progressUpdated=(action 'progressUpdated'))}}动作的位置。在application.hbs内（其中ember-progress-bar以块形式使用）;检索到已生成的操作，并将其作为onclick操作传递给file-upload组件。

我不知道这对你有帮助吗？但这是我大量用于组件间通信的技术。由于上下文组件（从组件中产生并使用块形式的组件将在其中使用），我再次依赖于操作。