Created
January 1, 2017 18:10
-
-
Save Thanood/5e93cd78f2b9569aff54d96efb077bf3 to your computer and use it in GitHub Desktop.
Aurelia combine bindable with collectionObserver
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="./my-component"></require> | |
| <require from="./jsonValueConverter"></require> | |
| <h1>Please observe console log</h1> | |
| <my-component items.bind="items"></my-component> | |
| <div> | |
| items: | |
| <ul> | |
| <li repeat.for="item of items">${item.title}</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <button click.delegate="overwriteItems()">overwrite items</button> | |
| <button click.delegate="pushNewItem()">push new item</button> | |
| </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 { | |
| items = []; | |
| pushNewItem() { | |
| this.items.push({ title: 'new item' }); | |
| } | |
| overwriteItems() { | |
| this.items = [ | |
| { title: 'item 1' }, | |
| { title: 'item 2' } | |
| ]; | |
| } | |
| } |
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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <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
| export class JsonValueConverter { | |
| toView(value) { | |
| if (value) { | |
| return JSON.stringify(value); | |
| } | |
| } | |
| } |
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 function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| aurelia.start().then(() => aurelia.setRoot()); | |
| } |
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
| my-component .indicator { | |
| display: inline-block; | |
| height: 50px; | |
| border: solid 1px grey; | |
| padding: 5px; | |
| } | |
| my-component .indicator.flash { | |
| background-color: green; | |
| color: white; | |
| } |
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="./my-component.css"></require> | |
| <div> | |
| <span class="indicator" ref="itemsChangedIndicator">itemsChanged called</span> | |
| <span class="indicator" ref="itemsObservedIndicator">itemsObserved called</span> | |
| </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
| import {bindable, inject, BindingEngine} from 'aurelia-framework'; | |
| @inject(BindingEngine) | |
| export class MyComponent { | |
| @bindable() items = []; | |
| subscription = null; | |
| constructor(bindingEngine) { | |
| this.subscription = bindingEngine.collectionObserver(this.items).subscribe(this.itemsObserved); | |
| } | |
| detached() { | |
| this.subscription.dispose(); | |
| } | |
| itemsChanged() { | |
| console.log('items changed'); | |
| this.flash(this.itemsChangedIndicator); | |
| } | |
| itemsObserved() { | |
| console.log('items observer triggered'); | |
| this.flash(this.itemsObservedIndicator); | |
| } | |
| flash(indicatorElement) { | |
| if (indicatorElement) { | |
| indicatorElement.classList.add('flash'); | |
| window.setTimeout(() => { | |
| indicatorElement.classList.remove('flash'); | |
| }, 200); | |
| } else { | |
| console.warn('no indicator'); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment