Emberのコンポーネント間の通信

Question

私は、アップロードの進行状況を示す2つのコンポーネント、ファイルアップロードコンポーネント、および進行状況バーを持つテンプレートを持っています。

{{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は、そのテンプレート内に{{yield (hash progressUpdated=(action 'progressUpdated'))}}のprogressUpdatedアクションを生成します。 application.hbs（ブロック形式ではember-progress-bar）。この生成されたアクションは検索され、file-uploadコンポーネントにonclickアクションとして渡されます。

これがまったく役立つかどうかわかりません。これはコンポーネント間通信に大いに役立つテクニックです。文脈的なコンポーネント（コンポーネントから得て、それが使用される予定のブロック形式のコンポーネントを使用する）のおかげで、私は再びアクションに頼ります。