Last active
December 31, 2018 02:36
-
-
Save AngelMunoz/cc241040c915ecc7f8a80aaa97f9591f to your computer and use it in GitHub Desktop.
Aurelia Gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}) | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <button click.delegate="click()"> | |
| I'm Emiting Camelcase | |
| </button> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://unpkg.com/@ionic/[email protected]/css/core.css" rel="stylesheet" /> | |
| <link href="https://unpkg.com/@ionic/[email protected]/css/normalize.css" rel="stylesheet" /> | |
| <link href="https://unpkg.com/@ionic/[email protected]/css/structure.css" rel="stylesheet" /> | |
| <link href="https://unpkg.com/@ionic/[email protected]/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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment