Ember.js : Passing actions up through nested components

README.md

Ember.js - passing actions through nested components

Overview

This is a set of files which illustrate how actions are passed through a series of nested components. I'm putting this in a gist because this is one of those things which I often scratch my head over when I have to do it from scratch.

The example makes use of a set of components, each nested inside the other. The innermost component, test-component-inner exposes a button with the label 'PRESS ME', clicking the button has the result that a log message is written to the console by the outermost component, test-component-outer.

Application.hbs
+-----------------------------------------------------------------------------------------------+
|                                                                                               |
|                                                                                               |
|  test-component-outer.hbs                                                                     |
|  +-----------------------------------------------------------------------------------------+  |
|  |                                                                                         |  |
|  |                                                                                         |  |
|  |  test-component-middle.hbs                                                              |  |
|  |  +----------------------------------------------------------------------------------+   |  |
|  |  |                                                                                  |   |  |
|  |  |                                                                                  |   |  |
|  |  |  test-component-inner.hbs                                                        |   |  |
|  |  |  +---------------------------------------------------------------------------+   |   |  |
|  |  |  |  +----------+                                                             |   |   |  |
|  |  |  |  |          |                                                             |   |   |  |
|  |  |  |  | PRESS ME |                                                             |   |   |  |
|  |  |  |  |          |                                                             |   |   |  |
|  |  |  |  +----------+                                                             |   |   |  |
|  |  |  +---------------------------------------------------------------------------+   |   |  |
|  |  |                                                                                  |   |  |
|  |  +----------------------------------------------------------------------------------+   |  |
|  |                                                                                         |  |
|  +-----------------------------------------------------------------------------------------+  |
|                                                                                               |
+-----------------------------------------------------------------------------------------------+

Version

This is valid as of Ember 3.4

Reference

The corresponding documentation for these ideas is here : https://guides.emberjs.com/v3.4.0/components/triggering-changes-with-actions/#toc_calling-actions-up-multiple-component-layers

application.hbs

<div class="container-fluid">
  <h1>Component Testbed</h1>
  {{test-component-outer}}
</div>

test-component-inner.hbs

<p>This is test-component-inner</p>
<p><button {{action testAction}}>Press Me</button></p>
{{yield}}

test-component-inner.js

import Component from '@ember/component';

export default Component.extend({
});

test-component-middle.hbs

<p>This is test-component-middle</p>
{{test-component-inner
  testAction=(action testAction)
}}
{{yield}}

test-component-middle.js

import Component from '@ember/component';

export default Component.extend({
});

test-component-outer.hbs

<p>This is test-component-outer</p>
{{test-component-middle
  testAction=(action "testAction")
}}
{{yield}}

test-component-outer.js

import Component from '@ember/component';

export default Component.extend({
  actions:{
    testAction() {
      console.log("testAction firing in test-component-outer");
    }
  }
});