Last active
March 18, 2018 15:50
-
-
Save lstarky/28447bcb4b0c67cff472aae397fd66c0 to your computer and use it in GitHub Desktop.
Aurelia modify sidebar from router view (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> | |
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container-fluid"> | |
| <ul class="nav navbar-nav"> | |
| <li><a href="#/home">Home</a></li> | |
| <li><a href="#/square">Square</a></li> | |
| <li><a href="#/circle">Circle</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <br><br><br><br><br><br><br> | |
| <div class="container"> | |
| <h1>Hello, ${fname}</h1> | |
| <div class="well" if.bind="sidebarExtra"> | |
| <compose view.bind="sidebarExtra"></compose> | |
| </div> | |
| <hr> | |
| <router-view></router-view> | |
| </div> | |
| </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 { | |
| sidebarExtra = ''; | |
| constructor(eventAggregator) { | |
| this.ea = eventAggregator; | |
| this.fname = "Liam"; | |
| } | |
| attached() { | |
| this.sub = this.ea.subscribe('my-router', response => { | |
| if (typeof response.fname !== 'undefined') { | |
| this.fname = response.fname; | |
| } | |
| if (typeof response.sidebarExtra !== 'undefined') { | |
| this.sidebarExtra = response.sidebarExtra; | |
| } | |
| }); | |
| } | |
| detached() { | |
| this.sub.dispose(); | |
| } | |
| configureRouter(config, router) { | |
| this.router = router; | |
| config.title = 'Menu'; | |
| config.map([ | |
| { route: ['', 'home'], name: 'home', moduleId: 'home' }, | |
| { route: 'square', name: 'square', moduleId: 'square'}, | |
| { route: 'circle', name: 'circle', moduleId: 'circle'} | |
| ]); | |
| } | |
| } |
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> | |
| <h4>Circle Router View</h4> | |
| <button class="btn btn-success" click.delegate="onClick()">Set text from Circle</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 Circle { | |
| constructor(eventAggregator) { | |
| this.ea = eventAggregator; | |
| } | |
| activate() { | |
| this.ea.publish('my-router', {sidebarExtra: 'circle-sidebar.html'}) | |
| } | |
| onClick() { | |
| this.ea.publish('my-router', {fname: 'Circle'}) | |
| } | |
| } |
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> | |
| <h4>Home Router View!</h4> | |
| <button class="btn btn-info" click.delegate="onClick()">Set text from Home</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 Home { | |
| constructor(eventAggregator) { | |
| this.ea = eventAggregator; | |
| } | |
| activate() { | |
| this.ea.publish('my-router', {sidebarExtra: null}) | |
| } | |
| onClick() { | |
| this.ea.publish('my-router', {fname: 'Home'}) | |
| } | |
| } |
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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <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> | |
| <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging(); | |
| aurelia.start().then(() => aurelia.setRoot()); | |
| } |
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> | |
| <h4>Square Router View</h4> | |
| <button class="btn btn-primary" click.delegate="onClick()">Set text from Square</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 Square { | |
| constructor(eventAggregator) { | |
| this.ea = eventAggregator; | |
| } | |
| activate() { | |
| this.ea.publish('my-router', {sidebarExtra: 'square-sidebar.html'}) | |
| } | |
| onClick() { | |
| this.ea.publish('my-router', {fname: 'Square'}) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment