Last active
November 28, 2017 10:57
-
-
Save AshleyGrant/e6e980a88d7e33aba130ef91f55df9dd to your computer and use it in GitHub Desktop.
Aurelia Dynamic and Static Elements
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="./text-box"></require> | |
| <require from="./date-picker"></require> | |
| <div> | |
| Text Box | |
| <text-box value.bind="text"></text-box> | |
| </div> | |
| <div> | |
| Date Picker | |
| <date-picker value.bind="date"></date-picker> | |
| </div> | |
| <button click.trigger="reset()">Reset controls</button> | |
| <div> | |
| Dynamic controls: | |
| <div repeat.for="control of controls"> | |
| ${control.label} | |
| <compose view-model="./${control.type}" model.bind="control.model" ></compose> | |
| <div> | |
| control.model.value = ${control.model.value} | |
| </div> | |
| </div> | |
| </div> | |
| <button click.trigger="changeModelDotValueOnTextBox()">Change model.value on text box</button> | |
| <button click.trigger="changeModelOnTextBox()">Change model.value on text box and then make a copy of the model</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
| export class App { | |
| text = 'This is some text'; | |
| date = '2017-02-28'; | |
| controls = getDefaultControls(); | |
| reset() { | |
| this.controls = getDefaultControls(); | |
| } | |
| changeModelOnTextBox() { | |
| this.controls[1].model = { | |
| value: 'I changed the model to something else!' | |
| }; | |
| } | |
| changeModelDotValueOnTextBox() { | |
| this.controls[1].model.value = 'I changed the model!'; | |
| } | |
| } | |
| function getDefaultControls(){ | |
| return[ | |
| {label: 'Entry Date', type: 'date-picker', model: { value: '2017-01-01' }}, | |
| {label: 'Code', type: 'text-box', model: { value: 'This is some other text'}} | |
| ]; | |
| } |
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="date" value.bind="value" /> | |
| </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, bindable, bindingMode, TaskQueue } from 'aurelia-framework'; | |
| import { ObserverLocator } from 'aurelia-binding'; | |
| @inject(Element, TaskQueue, ObserverLocator) | |
| export class DatePicker { | |
| @bindable({ defaultBindingMode: bindingMode.twoWay }) value; | |
| model = null; | |
| observerSubscription = null; | |
| constructor(el, taskQueue, observerLocator) { | |
| this.el = el; | |
| this.taskQueue = taskQueue; | |
| this.observerLocator = observerLocator; | |
| } | |
| activate(model) { | |
| if(this.observerSubscription) { | |
| this.observerSubscription.dispose(); | |
| } | |
| this.model = model; | |
| this.observerSubscription = this.observerLocator.getObserver(this.model, 'value') | |
| .subscribe(() => this.modelValueChanged()); | |
| this.hasModel = true; | |
| this.modelValueChanged(); | |
| } | |
| detached() { | |
| if(this.observerSubscription) { | |
| this.observerSubscription.dispose(); | |
| } | |
| } | |
| modelValueChanged() { | |
| this.guard = true; | |
| this.value = this.model.value; | |
| this.taskQueue.queueMicroTask(() => this.guard = false) | |
| } | |
| valueChanged() { | |
| if(this.guard == false && this.hasModel) { | |
| this.model.value = this.value; | |
| } | |
| } | |
| } |
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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script> | |
| <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script> | |
| <script> | |
| System.import('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
| <template> | |
| <input type="text" value.bind="value" /> | |
| </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, bindable, bindingMode, TaskQueue } from 'aurelia-framework'; | |
| import { ObserverLocator } from 'aurelia-binding'; | |
| @inject(Element, TaskQueue, ObserverLocator) | |
| export class TextBox { | |
| @bindable({ defaultBindingMode: bindingMode.twoWay }) value; | |
| model = null; | |
| observerSubscription = null; | |
| constructor(el, taskQueue, observerLocator) { | |
| this.el = el; | |
| this.taskQueue = taskQueue; | |
| this.observerLocator = observerLocator; | |
| } | |
| activate(model) { | |
| if(this.observerSubscription) { | |
| this.observerSubscription.dispose(); | |
| } | |
| this.model = model; | |
| this.observerSubscription = this.observerLocator.getObserver(this.model, 'value') | |
| .subscribe(() => this.modelValueChanged()); | |
| this.hasModel = true; | |
| this.modelValueChanged(); | |
| } | |
| detached() { | |
| if(this.observerSubscription) { | |
| this.observerSubscription.dispose(); | |
| } | |
| } | |
| modelValueChanged() { | |
| this.guard = true; | |
| this.value = this.model.value; | |
| this.taskQueue.queueMicroTask(() => this.guard = false) | |
| } | |
| valueChanged() { | |
| if(this.guard == false && this.hasModel) { | |
| this.model.value = this.value; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment