-
-
Save bigopon/ed79d138d37fd0a5cdf6614dbd35b6ff to your computer and use it in GitHub Desktop.
Test: Automatic Number Conversion
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> | |
| <input type="number" value.bind="value" /> | |
| <pre>${log}</pre> | |
| </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, observable, bindable , DOM } from 'aurelia-framework'; | |
| export class App { | |
| @observable value = 1; | |
| _log = ['Log Initialized']; | |
| valueChanged(newVal) { | |
| this._log.push(`Value updated: ${newVal} (${typeof(newVal)})`); | |
| } | |
| get log() { | |
| return this._log.join('\n'); | |
| } | |
| } | |
| export class NumberValueConverter { | |
| fromView(val) { | |
| return parseFloat(val); | |
| } | |
| } | |
| @inject(DOM.Element) | |
| export class TypeCustomAttribute { | |
| /** | |
| * We gonna reference the value field of this CustomAttribute class anyway | |
| * Maybe just declare it for readability | |
| * | |
| * Also can be used for defaultValue = text if necessary | |
| */ | |
| @bindable({ defaultValue: 'text' }) value | |
| constructor(element) { | |
| this.element = element; | |
| } | |
| /** | |
| * Instead of some this.element.au.scope, use the owningView. | |
| * They are the same | |
| */ | |
| created(owningView) { | |
| this.owningView = owningView; | |
| } | |
| bind() { | |
| /** | |
| * this.element.type has the same value of this.value | |
| */ | |
| if (this.value === 'number') { | |
| let valueBinding = this.owningView.bindings | |
| /** | |
| * Need to ensure we are targeting the element the custom attribute annotates on | |
| * Otherwise we may get valueBinding on a previous element | |
| */ | |
| .find(b => b.target === this.element && b.targetProperty === 'value'); | |
| if (valueBinding) { | |
| /** | |
| * Need clean up in unbind, so lets store original method instead of newly bound | |
| */ | |
| let updateSource = valueBinding.updateSource.bind(valueBinding); | |
| let updateTarget = valueBinding.updateTarget.bind(valueBinding); | |
| valueBinding.updateSource = (v) => updateSource(parseFloat(v)); | |
| valueBinding.updateTarget = (v) => Number.isFinite(v) && updateTarget(v); | |
| } | |
| } | |
| } | |
| } |
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"> | |
| </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> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment