Test Bubbling action

components.my-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  onMonClick() {
  },
  
  actions: {
    monClickAction() {
    	this.onMonClick();
    }
  }
});

components.my-send.js

import Ember from 'ember';

export default Ember.Component.extend({
 	onMonClick: null,
  
  actions: {
    monClickAction() {
    	this.sendAction('onMonClick');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Test Bubbling action',
  
  text: 'mon text',
  
  log(text) {
  	this.set('text', this.text + '<br />' + text);
  },
  
  actions: {
  	monAction() {
      this.log('in applcation');
      return true;
    }
  }
});

controllers.parent.child.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
  	monAction() {
      this.controllerFor('application').log('in child');
      return true;
    }
  }
});

controllers.parent.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
  	monAction() {
      this.controllerFor('application').log('in parent');
      return true;
    }
  }
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('parent', { path: '/parent' }, function() {
  	this.route('child', { path: 'child' });
  });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
   actions: {
  	monRouteAction() {
      this.controllerFor('application').log('in applcation route');
    }
  }
});

routes.parent.child.js

import Ember from 'ember';

export default Ember.Route.extend({
	actions: {
  	monRouteAction() {
      this.controllerFor('application').log('in child route');
    }
  }
});

routes.parent.js

import Ember from 'ember';

export default Ember.Route.extend({
	actions: {
  	monRouteAction() {
      this.controllerFor('application').log('in parent route');
    }
  }
});

templates.application.hbs

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<h1>Welcome to {{appName}}</h1>

<ul class="nav nav-pills">
	{{#link-to 'index' tagName="li"}}<a href="#">/</a>{{/link-to}}
	{{#link-to 'parent' tagName="li"}}<a href="#">parent</a>{{/link-to}}
</ul>

<br>
<br>
<div class="well">
{{outlet}}
</div>
<br>
<br>

<button class="btn btn-info" {{action "monRouteAction"}}>mon action!</button>
{{my-button onMonClick=(route-action "monRouteAction") }}
{{my-button onMonClick=(action "monAction") }}
{{my-send onMonClick="monRouteAction" }}

<p class="well">
text: {{{text}}}
</p>

templates.components.my-button.hbs

<button class="btn btn-primary" {{action "monClickAction"}}>my button action!</button>

templates.components.my-send.hbs

<button class="btn btn-danger" {{action "monClickAction"}}>my button send action!</button>

templates.index.hbs

<h3>INDEX</h3>

templates.parent.child.hbs

<h4>CHILD</h4>

<p>{{coco}}</p>

templates.parent.hbs

<h3>PARENT</h3>
<ul class="nav nav-pills">
	{{#link-to 'parent.index' tagName="li"}}<a href="#">/</a>{{/link-to}}
	{{#link-to 'parent.child' tagName="li"}}<a href="#">child</a>{{/link-to}}
</ul>
{{outlet}}

templates.parent.index.hbs

<h4>PARENT INDEX</h4>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.3.2",
    "ember-template-compiler": "3.3.2",
    "ember-testing": "3.3.2"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-route-action-helper": "2.0.6"
  }
}