我有一个包含两个组件的模板,一个文件上传组件和一个进度条,用于显示上传进度。
{{file-upload}}
{{ember-progress-bar progress=progress}}
并且正在使用ember-uploader。我试图像这样设置进度条的进度:
uploader.on('progress', e => {
// send progress to other component
});
我已经读过您应该使用操作在组件之间进行通信,但是我只能访问上载组件中filesDidChange函数中的进度值,因此我认为我无法在操作中发送它。将进度值发送到进度条组件的最佳方法是什么?
最佳答案
在这里,我使用上下文组件为不具有父子关系的组件(一个组件不会在其模板中呈现另一个组件)启用组件间通信。
请查看下面的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
组件。
我不知道这是否对您有帮助;但这是我在组件间通信中大量使用的技术。由于上下文组件的存在,我再次依赖于动作(从组件产生并以要使用的块形式使用组件)。