click-handles

components.child-elements.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    log(name) {
      this.sendAction('log', name);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  logs: [],
  
  actions: {
    helloFrom(name) {
      this.get('logs').pushObject(name);
    },
    
    stopPropagation(event) {
      this.get('logs').pushObject(event);
      return false;
    }
  }
});

styles.app.css

body {
  --padding-small: 8px;
  --padding-medium: 16px;
  
  --color-light: #D4C2FC;
  --color-medium: #998FC7;
  --color-dark: #28262C;
  
  margin: var(--padding-medium);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  color: var(--color-dark);
}

.wrapper {
  display: flex;
}

.example-column {
  flex: 1 0 auto;
}

.log-column {
  flex: 0 1 25%;
  padding: 0 var(--padding-medium);
}

.parent {
  padding: var(--padding-medium);
  margin: var(--padding-small);
  background-color: var(--color-medium);
  border: 1px solid var(--color-dark);
  max-width: 350px;
}

.child {
  padding: 12px;
  margin: 10px 0;
  background-color: var(--color-light);
  border: 1px solid var(--color-dark);
}

templates.application.hbs

<div class="wrapper">
  <div class="example-column">
    <div class="parent" {{action (action "helloFrom" "elementModifier")}}>
      <strong>Element Modifier</strong>
      
      {{#child-elements parentName="elementModifier"
                       log=(action "helloFrom") as |children|}}
         <p>Fires <strong>after</strong> actions from childen, <strong>unless</strong> the child action does not bubble.</p>
         {{children.element-modifier}}
      {{/child-elements}}
     </div>

    {{my-component click=(action "helloFrom" "clickHandler")}}

    <div class="parent" onClick={{action (action "helloFrom" "onClick Handler")}}>
      <strong>onClick Handler</strong>

      <p>Fires <strong>before</strong> actions from childen, <strong>even if</strong> the child action does not bubble.</p>

      {{child-elements parentName="onClick handler"
                       log="helloFrom"}}
    </div>
  </div>
  
  {{#my-component click=(action "helloFrom" "click Attribute")}}
    <div class="parent">
      <strong>click Attribute</strong>
      
      {{child-elements parentName="click Attribute"
                       log="helloFrom"}}
    </div>
  {{/my-component}}
  
  <div class="log-column">
    <strong>Logs:</strong>
    <ol>
      {{#each logs as |log|}}
        <li>{{log}}</li>
      {{/each}}
    </ol>
	</div>
</div>

templates.components.child-elements.element-modifier.hbs

<div class="child" 
   {{action log (concat "EM child of " parentName)}}>
  Child with Element Modifier
</div>

<div class="child" 
  {{action log (concat "EM child (bubbles=false) of " parentName) bubbles=false}}>
  Child with Element Modifier, bubbles=false
</div>

templates.components.child-elements.hbs

<div class="child">
  Child
</div>

{{yield (hash 
  element-modifier=(component "child-elements/element-modifier"
                               parentName=parentName
                               log=log))}}

<div class="child" 
     onClick={{action (action "log" (concat "child w/ click handler of " parentName))}}>
  Child with onClick Handler
</div>

<div class="child" 
    onclick={{action "log" (concat "child w/ click handler, bubbles=false of " parentName) bubbles=false}}>
  Child with onClick Handler, bubbles=false
</div>

templates.components.my-component.hbs

{{yield}}

templates.components.on-click.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}