Last active
January 18, 2017 01:51
-
-
Save lstarky/11cd1e90dd912f07a60afaedb9c2613b to your computer and use it in GitHub Desktop.
Change event in Aurelia
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> | |
| <div class="container"> | |
| <h1>Hello, ${fname}!</h1> | |
| <form> | |
| <div class="form-group"> | |
| <label class="control-label">Name input (no change event on input):</label> | |
| <input type="text" class="form-control" value.bind="fname"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="control-label">Name input (change and keyup events on input):</label> | |
| <input type="text" class="form-control" value.bind="fname" change.delegate="goInputChange()" keyup.delegate="goInputKeyup()"> | |
| </div> | |
| <button class="btn btn-primary btn-large" ref="btn_new" click.delegate="goAddCharacter()">Add Character to Name</button> | |
| <br><br> | |
| <div class="form-group"> | |
| <label class="control-label"> | |
| Change events from Aurelia Binding: | |
| <strong>${count_aurelia}</strong> | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label class="control-label"> | |
| Change events from Input Change Trigger: | |
| <strong>${count_input}</strong> | |
| </label> | |
| </div> | |
| <div class="form-group"> | |
| <label class="control-label"> | |
| Change events from Input KeyUp Trigger: | |
| <strong>${count_keyup}</strong> | |
| </label> | |
| </div> | |
| </form> | |
| </div> | |
| </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 {observable} from 'aurelia-framework'; | |
| export class App { | |
| @observable fname; | |
| constructor() { | |
| this.fname = "Liam"; | |
| this.count_aurelia = 0; | |
| this.count_input = 0; | |
| this.count_keyup = 0; | |
| } | |
| fnameChanged() { | |
| this.count_aurelia += 1; | |
| } | |
| goInputChange() { | |
| this.count_input += 1; | |
| } | |
| goInputKeyup() { | |
| this.count_keyup += 1; | |
| } | |
| goAddCharacter() { | |
| this.fname = this.fname + "A"; | |
| } | |
| } |
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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <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> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
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 function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| aurelia.start().then(() => aurelia.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment