[英]Communication between components in Ember
I have a template with two components, a file upload component, and a progress bar to show the upload progress. 我有一个包含两个组件的模板,一个文件上传组件和一个进度条,用于显示上传进度。
{{file-upload}}
{{ember-progress-bar progress=progress}}
And am using ember-uploader. 并且正在使用ember-uploader。 I'm trying to set the progress of the progress bar like so:
我试图像这样设置进度条的进度:
uploader.on('progress', e => {
// send progress to other component
});
I've read that you should use actions to communicate between components, but I only have access to that progress value within the filesDidChange function in the upload component, so I don't think I can send it in an action. 我已经读过您应该使用操作在组件之间进行通信,但是我只能访问上载组件中filesDidChange函数中的进度值,因此我认为我无法在操作中发送它。 What is the best way to send this progress value into the progress bar component?
将进度值发送到进度条组件的最佳方法是什么?
This is where I use contextual components to enable inter-component communication for components that do not have parent-child relation (one does not render the other within its template). 在这里,我使用上下文组件为不具有父子关系的组件(一个组件不会在其模板中呈现另一个组件)启用组件间通信。
Please take a look at the following twiddle I have prepared for you to illustrate what I mean. 请看看下面的玩弄我已经准备好为你说明我的意思。 I have created mock
ember-progress-bar
and file-upload
components. 我创建了模拟
ember-progress-bar
和file-upload
组件。 Instead of the filesDidChange
function of course I used click
function for the mock file-upload
component and I decided to send screenX
and screenY
values to the mouse click event to ember-progress-bar
component as the progress. 我当然不是使用
filesDidChange
函数,而是使用了模拟file-upload
组件的click
函数,并决定将screenX
和screenY
值发送给鼠标click事件,以作为进度进行ember-progress-bar
组件。
ember-progress-bar
is used as a contextual component within application.hbs
; ember-progress-bar
用作application.hbs
的上下文组件; where ember-progress-bar
yields the progressUpdated
action with {{yield (hash progressUpdated=(action 'progressUpdated'))}}
inside its template. 其中
ember-progress-bar
产生了progressUpdated
与动作{{yield (hash progressUpdated=(action 'progressUpdated'))}}
它的模板内。 Within application.hbs
(where ember-progress-bar
is used in block form); 在
application.hbs
(其中ember-progress-bar
以块形式使用); this yielded action is retrieved and passed as the onclick
action to the file-upload
component. 检索此产生的动作,并将其作为
onclick
动作传递到file-upload
组件。
I do not know if this will help you at all; 我不知道这是否对您有帮助; but this is the technique I heavily use for inter-component communication.
但这是我在组件间通信中大量使用的技术。 I rely on actions yet again thanks to the contextual components (yielding from component and using the component in block form where it is going to be used).
由于上下文组件的存在,我再次依赖于动作(从组件产生并以要使用的块形式使用组件)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.