Created
February 20, 2021 22:36
-
-
Save bigopon/e7d0ce4cebe02e4f5982b15b10d7ab03 to your computer and use it in GitHub Desktop.
gh-1121 web-component-two-way-binding MWC components
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <title>Dumber Gist</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> | |
| <base href="/"> | |
| <script type="module" src="https://unpkg.com/@material/mwc-textfield@0.21.0-canary.55addb8c.0/mwc-textfield.js?module"></script> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet"> | |
| </head> | |
| <!-- | |
| Dumber Gist uses dumber bundler, the default bundle file | |
| is /dist/entry-bundle.js. | |
| The starting module is pointed to "main" (data-main attribute on script) | |
| which is your src/main.ts. | |
| --> | |
| <body> | |
| <app></app> | |
| <script src="/dist/entry-bundle.js" data-main="main"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| { | |
| "dependencies": { | |
| "aurelia": "dev" | |
| } | |
| } |
This file contains hidden or 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
| <label>web component with two-way binding (shows initial value but does not update in either direction)</label> | |
| <br><br> | |
| with .two-way<br> | |
| <mwc-textfield type="text" value.two-way="value"></mwc-textfield> | |
| <hr> | |
| with .bind<br> | |
| <mwc-textfield type="text" value.bind="value"></mwc-textfield> | |
| <br><br> | |
| <label>standard input with two-way binding (update both ways, as expected)</label> | |
| <br><br> | |
| <input type="text" value.two-way="value"> | |
| <br><br> | |
| MODEL: | |
| <br><br> | |
| ${json} | |
| <br><br> | |
| <button click.trigger="reset()">reset model back to initial_value</button> | |
This file contains hidden or 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 { | |
| initial='initial_value'; | |
| constructor() { | |
| this.reset(); | |
| } | |
| get json() { | |
| return JSON.stringify({value:this.value}); | |
| } | |
| reset() { | |
| this.value=this.initial; | |
| } | |
| } |
This file contains hidden or 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 Aurelia, { IAttrSyntaxTransformer, NodeObserverLocator } from 'aurelia'; | |
| import { App } from './app'; | |
| //import { TextField } from "@material/mwc-textfield"; | |
| Aurelia.register({ | |
| register(container: IContainer) { | |
| const attrSyntaxTransformer = container.get(IAttrSyntaxTransformer); | |
| const nodeObserverLocator = container.get(NodeObserverLocator); | |
| attrSyntaxTransformer.useTwoWay((el, property) => { | |
| switch (el.tagName) { | |
| case 'MWC-TEXTFIELD': return property === 'value'; | |
| } | |
| return false; | |
| }); | |
| nodeObserverLocator.useConfig({ | |
| 'MWC-TEXTFIELD': { | |
| value: { events: ['input', 'change'] } | |
| } | |
| }); | |
| } | |
| }).app(App).start(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment