AngelMunoz/app.html

## app.html
<template>
  <require from="./event-case"></require>
  <h1>${message}</h1>
  <p>
    Looking at the console, you can see the event was dispatched,
    but it was not caught by aurelia's binding <br />
    <event-case ref="case1" my-click.trigger="onClick($event)"></event-case>
    <event-case ref="case2" my-click.delegate="onClick($event)"></event-case>
  </p>
  <p>
    Solution could be simple, don't emit camelcased events!
    but that's not really an option now days because we have frameworks like ionic
    pushing for web components + the way they emit events is camelcase which sadly
    doesn't get captured
  </p>
  <ion-item>
    <ion-input ref="case3" value.bind="message" ion-change.delegate="changed($event)" keyup.trigger="changed($event)"></ion-input>
  </ion-item>
  <ion-item>
    <ion-select ref="case4" value.bind="message" ion-change.delegate="change($event)">
      <ion-select-option value="">
        Choose an Option
      </ion-select-option>
      <ion-select-option value="Hello World!">
        Hello World!
      </ion-select-option>
      <ion-select-option value="other">
        Other!
      </ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-select ref="case5" value.bind="message" ion-change.trigger="change($event)">
      <ion-select-option value="">
        Choose an Option
      </ion-select-option>
      <ion-select-option value="Hello World!">
        Hello World!
      </ion-select-option>
      <ion-select-option value="other">
        Other!
      </ion-select-option>
    </ion-select>
  </ion-item>
</template>

## app.js
export class App {
  message = 'Hello World!';

  changed(event) {
      console.log('changed event', event);
  }

  onClick(event) {
    console.log('catching event', event)
  }

  attached() {
    this.case1.addEventListener('myClick', this.case1Handler.bind(this));
    this.case2.addEventListener('myClick', this.case2Handler.bind(this));
    this.case3.addEventListener('ionChange', this.case3Handler.bind(this));
    this.case4.addEventListener('ionChange', this.case4Handler.bind(this));
    this.case5.addEventListener('ionChange', this.case5Handler.bind(this));
  }

  detached() {
    this.case1.removeEventListener('myClick', this.case1Handler.bind(this));
    this.case2.removeEventListener('myClick', this.case2Handler.bind(this));
    this.case3.removeEventListener('ionChange', this.case3Handler.bind(this));
    this.case4.removeEventListener('ionChange', this.case4Handler.bind(this));
    this.case5.removeEventListener('ionChange', this.case5Handler.bind(this));
  }

  case1Handler($event) {
    console.log('case1Handler', {event})
  }
  case2Handler($event) {
    console.log('case2Handler', {event})
  }
  case3Handler($event) {
    console.log('case3Handler', {event})
  }
  case4Handler($event) {
    console.log('case4Handler', {event})
  }
  case5Handler($event) {
    console.log('case5Handler', {event})
  }
}

## event-case.html
<template>
  <button click.delegate="click()">
    I'm Emiting Camelcase
  </button>
</template>

## event-case.js
import { inject } from 'aurelia-framework';

@inject(Element)
export class EventCase {

  constructor(element) {
    this.element = element;
  }

  click() {
    const event = new CustomEvent('myClick', { detail: 'Yaaaay' });
    this.element.dispatchEvent(event);
    console.log('dispatching Event', {event});
  }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/core.css" rel="stylesheet" />
    <link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/normalize.css" rel="stylesheet" />
    <link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/structure.css" rel="stylesheet" />
    <link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/typography.css" rel="stylesheet" />
  </head>
  <body aurelia-app>

    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<require from="./event-case"></require>
	<h1>${message}</h1>
	<p>
	Looking at the console, you can see the event was dispatched,
	but it was not caught by aurelia's binding <br />
	<event-case ref="case1" my-click.trigger="onClick($event)"></event-case>
	<event-case ref="case2" my-click.delegate="onClick($event)"></event-case>
	</p>
	<p>
	Solution could be simple, don't emit camelcased events!
	but that's not really an option now days because we have frameworks like ionic
	pushing for web components + the way they emit events is camelcase which sadly
	doesn't get captured
	</p>
	<ion-item>
	<ion-input ref="case3" value.bind="message" ion-change.delegate="changed($event)" keyup.trigger="changed($event)"></ion-input>
	</ion-item>
	<ion-item>
	<ion-select ref="case4" value.bind="message" ion-change.delegate="change($event)">
	<ion-select-option value="">
	Choose an Option
	</ion-select-option>
	<ion-select-option value="Hello World!">
	Hello World!
	</ion-select-option>
	<ion-select-option value="other">
	Other!
	</ion-select-option>
	</ion-select>
	</ion-item>
	<ion-item>
	<ion-select ref="case5" value.bind="message" ion-change.trigger="change($event)">
	<ion-select-option value="">
	Choose an Option
	</ion-select-option>
	<ion-select-option value="Hello World!">
	Hello World!
	</ion-select-option>
	<ion-select-option value="other">
	Other!
	</ion-select-option>
	</ion-select>
	</ion-item>
	</template>
	export class App {
	message = 'Hello World!';

	changed(event) {
	console.log('changed event', event);
	}

	onClick(event) {
	console.log('catching event', event)
	}

	attached() {
	this.case1.addEventListener('myClick', this.case1Handler.bind(this));
	this.case2.addEventListener('myClick', this.case2Handler.bind(this));
	this.case3.addEventListener('ionChange', this.case3Handler.bind(this));
	this.case4.addEventListener('ionChange', this.case4Handler.bind(this));
	this.case5.addEventListener('ionChange', this.case5Handler.bind(this));
	}

	detached() {
	this.case1.removeEventListener('myClick', this.case1Handler.bind(this));
	this.case2.removeEventListener('myClick', this.case2Handler.bind(this));
	this.case3.removeEventListener('ionChange', this.case3Handler.bind(this));
	this.case4.removeEventListener('ionChange', this.case4Handler.bind(this));
	this.case5.removeEventListener('ionChange', this.case5Handler.bind(this));
	}

	case1Handler($event) {
	console.log('case1Handler', {event})
	}
	case2Handler($event) {
	console.log('case2Handler', {event})
	}
	case3Handler($event) {
	console.log('case3Handler', {event})
	}
	case4Handler($event) {
	console.log('case4Handler', {event})
	}
	case5Handler($event) {
	console.log('case5Handler', {event})
	}
	}
	<template>
	<button click.delegate="click()">
	I'm Emiting Camelcase
	</button>
	</template>
	import { inject } from 'aurelia-framework';

	@inject(Element)
	export class EventCase {

	constructor(element) {
	this.element = element;
	}

	click() {
	const event = new CustomEvent('myClick', { detail: 'Yaaaay' });
	this.element.dispatchEvent(event);
	console.log('dispatching Event', {event});
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/core.css" rel="stylesheet" />
	<link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/normalize.css" rel="stylesheet" />
	<link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/structure.css" rel="stylesheet" />
	<link href="https://unpkg.com/@ionic/core@4.0.0-rc.0/css/typography.css" rel="stylesheet" />
	</head>
	<body aurelia-app>

	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>