New Twiddle

components.nested-four.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    // utterly disgusting
    classicAction() {
      this.sendAction('classicAction', 'four');
    }
  }
});

components.nested-one.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    // utterly disgusting
    classicAction(...args) {
      this.sendAction('classicAction', 'one', ...args);
    }
  }
});

components.nested-three.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    // utterly disgusting
    classicAction(...args) {
      this.sendAction('classicAction', ...args);
    }
  }
});

components.nested-two.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    // utterly disgusting
    classicAction(...args) {
      this.sendAction('classicAction', ...args);
    }
  }
});

components.top-level-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    closureAction(...args) {
      alert('Closure action fired! Args: ' + args.join(''));
    },
    
    classicAction(...args) {
      alert('Classic action fired! Args: ' + args.join(''));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{top-level-component}}
<br>
<br>

templates.components.nested-four.hbs

{{!-- We have arrived! Fire off each action with an argument. --}}

<button {{action closureAction "four"}}>
  Fire Closure Action
</button>

<button {{action classicAction "four"}}>
  Fire Classic Action
</button>

templates.components.nested-one.hbs

{{!--
  This first level component needs to do some decorating for some reason. It needs to provide additional arguments to each action.
  
  Closure actions allow for the decorating to happen here.
  Classic actions have to do this in the JS layer.
 --}}
 
{{nested-two
  closureAction=(action closureAction "one")
  classicAction=classicAction}}

templates.components.nested-three.hbs

{{!--
  These next two are passthroughs.
  --}}
{{nested-four
  classicAction=classicAction
  closureAction=closureAction}}

templates.components.nested-two.hbs

{{!--
  These next two are passthroughs.
  --}}
{{nested-three
  classicAction=classicAction
  closureAction=closureAction}}

templates.components.top-level-component.hbs

{{!-- Our journey begins. --}}
{{nested-one
  closureAction=(action "closureAction")
  classicAction="classicAction"}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}