Created
September 24, 2016 07:01
-
-
Save martonsagi/f66eaa12e4183a72a7a3cc01ce3a8fb5 to your computer and use it in GitHub Desktop.
Aurelia - Accessing Custom Component Data/Methods with EventAggregator
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="component"></require> | |
| <div repeat.for="item of components"> | |
| <label>${item.name}${item.id}</label>: <component id.bind="item.id"></component> | |
| </div> | |
| <hr> | |
| <button class="btn btn-primary" click.delegate="SubmitData({id: 1})">Submit data for Component#1</button> | |
| <hr> | |
| <button class="btn btn-success" click.delegate="SubmitData({all: true})">Submit data for All Component</button> | |
| <hr> | |
| <button if.bind="removed" class="btn btn-info" click.delegate="AddComponent(2)">Add Component#2</button> | |
| <button if.bind="!removed" class="btn btn-danger" click.delegate="RemoveComponent(2)">Remove Component#2</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
| import { inject } from "aurelia-framework"; | |
| import { EventAggregator } from 'aurelia-event-aggregator'; | |
| @inject(EventAggregator) | |
| export class App { | |
| components = [ | |
| { id: 1, name: 'Component #' }, | |
| { id: 2, name: 'Component #' }, | |
| { id: 3, name: 'Component #' } | |
| ]; | |
| removed = false; | |
| constructor(eventAggregator) { | |
| this.eventAggregator = eventAggregator; | |
| } | |
| SubmitData(opts) { | |
| this.eventAggregator.publish('component:save', opts); | |
| } | |
| RemoveComponent(id) { | |
| let item = this.components.find(i => i.id === id); | |
| if (item) { | |
| let index = this.components.indexOf(item); | |
| this.components.splice(index, 1); | |
| } | |
| this.removed = true; | |
| } | |
| AddComponent(id) { | |
| this.components.push({id: id, name: 'Component #'}); | |
| this.removed = false; | |
| } | |
| } |
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="object.Name" /> | |
| </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 } from 'aurelia-framework'; | |
| import { EventAggregator } from 'aurelia-event-aggregator'; | |
| @inject(EventAggregator) | |
| export class Component { | |
| @bindable | |
| id; | |
| object = {}; | |
| constructor(eventAggregator) { | |
| this.eventAggregator = eventAggregator; | |
| } | |
| bind() { | |
| this.object = { | |
| "Name": `My name ${this.id}`, | |
| "Age": 21 | |
| }; | |
| console.log(`component ADDED: #${this.id}`); | |
| this.subscriber = this.eventAggregator.subscribe('component:save', data => { | |
| if (data.id === this.id || data.all === true) { | |
| this.SubmitObjectToDatabase(); | |
| console.log(`component:save SAVED: #${this.id}`, this.object.Name); | |
| } else { | |
| console.log(`component:save PASSED: #${this.id}`); | |
| } | |
| }); | |
| } | |
| SubmitObjectToDatabase() { | |
| console.log(`SubmitObjectToDatabase has been called: #${this.id}`); | |
| } | |
| detached() { | |
| // cleanup | |
| this.subscriber.dispose(); | |
| console.log(`component REMOVED: #${this.id}`); | |
| } | |
| } |
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"> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment