Last active
October 3, 2016 13:02
-
-
Save plwalters/5bb0d5fa133f5c4f17bd2505b102f754 to your computer and use it in GitHub Desktop.
ast visualizer
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
| <template> | |
| <ul> | |
| <li repeat.for="person of people" click.delegate="changeColor(person, $event)" style="background-color: ${person.color}"> | |
| ${person.name} | |
| <div repeat.for="item of items" click.delegate="changeColor(item, $event)" style="color: ${item.color}"> | |
| ${item.checked} | |
| <input type="checkbox" click.delegate="stopPropagation($event)"/> | |
| </div> | |
| </li> | |
| </ul> | |
| <div | |
| </template> | |
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 { | |
| people = [{name: 'Patrick'}, {name: 'Sam'}]; | |
| items = [{checked: true},{checked: false}]; | |
| changeColor(item, $event) { | |
| console.log(item) | |
| item.color = item.color === 'red' ? 'blue' : 'red'; | |
| this.stopPropagation($event); | |
| } | |
| stopPropagation($event) { | |
| $event.stopPropagation(); | |
| } | |
| } |
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> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> | |
| <style> | |
| .expression-input { | |
| width: 100%; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| </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> |
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
| <template> | |
| <require from="style-node"></require> | |
| <style-node> | |
| <h1>Hello</h1> | |
| </style-node> | |
| </template> |
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 MyElement { | |
| } |
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
| <template> | |
| <div css="backgroundColor: ${backgroundColor}; color: ${color}"> | |
| <slot></slot> | |
| </div> | |
| </template> |
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 StyleNode { | |
| backgroundColor = ''; | |
| color = 'blue'; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment