BruceL33t · March 27, 2017 07:40
diff --git a/app.html b/app.html
 <template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li >
      <a href="#viewmodel-with-subrouter/shared-parent/child-a">child a</a>
    </li>
    <li >
      <a href="#viewmodel-with-subrouter/shared-parent/child-b">child b</a>
    </li>
  </ul>
  <router-view></router-view>
 </template>
diff --git a/app.js b/app.js
 export class App {
  message = 'Hello World!';
  
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['','viewmodel-with-subrouter'],  moduleId: './viewmodel-with-subrouter' , nav: true, title: 'viewmodel-with-subrouter' },
    ]);

    this.router = router;
  }
 }
diff --git a/child-a.html b/child-a.html
 <template>
  <div slot="somename" class="child">
    Child A
  </div>
 </template>
diff --git a/child-a.js b/child-a.js
 import {inject} from 'aurelia-framework';
 import {SharedState} from './shared-state';
 import {EventAggregator} from 'aurelia-event-aggregator';

 @inject(SharedState,EventAggregator)
 export class ChildA {
  
  constructor(state, ea) {
    state.heading += '[hello from child A]';
    this.state = state;
    this.ea = ea;
  }
  
  attached() {
    this.subscriber = this.ea.subscribe('testEvent', response => {
            alert(response.testValue);
        });
  }
  
  detached(){
    this.subscriber.dispose();
  }
 }
diff --git a/child-b.html b/child-b.html
 <template>
  <div slot="somename" class="child">
    Child B
  </div>
 </template>
diff --git a/child-b.js b/child-b.js
 import {inject} from 'aurelia-framework';
 import {SharedState} from './shared-state';
 import {EventAggregator} from 'aurelia-event-aggregator';

 @inject(SharedState,EventAggregator)
 export class ChildB {
  
  constructor(state, ea) {
    alert("childb")
    
    state.heading += '[hello from child A]';
    this.state = state;
    this.ea = ea;
  }
  
  attached() {
    this.subscriber = this.ea.subscribe('testEvent', response => {
            alert(response.testValue);
        });
  }
  
  detached(){
    this.subscriber.dispose();
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .shared-parent,
      .shared-parent > form {
        border: 5px solid green;
        padding: 10px;
      }
      .shared-parent > form {
        width: 50%;
      }
      
      .child {
        border: 5px solid blue;
        margin-top: 10px;
        padding: 10px;
      }
    </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>
diff --git a/shared-parent.html b/shared-parent.html
 <template>
  <div class="shared-parent">
    ${state.heading}
    <a click.trigger="clicked()" href="#">click here</a>
    <slot name="somename"></div>
  </div>
 </template>
diff --git a/shared-parent.js b/shared-parent.js
 import {inject} from 'aurelia-framework';
 import {SharedState} from './shared-state';
 import {EventAggregator} from 'aurelia-event-aggregator';

 @inject(SharedState, EventAggregator)
 export class SharedParent {
  
  constructor(state, ea) {
    this.state = state;
    this.ea = ea;
    state.heading += '[hello from shared parent]';
    
    
  }
  
  clicked(){
    alert("clicked() src: sharedParent")
    this.ea.publish('testEvent', {testValue: 'What just happened?'});
  }
 }
diff --git a/shared-state.js b/shared-state.js
 // let instance = null;

 export class SharedState {
  heading = '';
 }
diff --git a/viewmodel-with-subrouter.html b/viewmodel-with-subrouter.html
 <template>
  <p>viewmodel-with-subrouter.html</p>
        <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>

 </template>
diff --git a/viewmodel-with-subrouter.js b/viewmodel-with-subrouter.js
 import {bindable} from 'aurelia-framework';

 export class ViewmodelWithSubrouter {
  @bindable router;
  heading = 'viewmodel-with-subrouter';
  configureRouter(config, router) {
    config.map([
      { route: ['','shared-parent/child-a'],  moduleId: './child-a' , nav: true, title: 'Shared Parent - child-a' },
        { route: 'shared-parent/child-b', moduleId: './child-b', nav: true, title: 'Shared Parent - child-b' },
    ]);

    this.router = router;
  }

  constructor() {}
 }
	<template>
	<style>
	.active a { color: red; font-weight: bold; }
	</style>
	<ul>
	<li >
	<a href="#viewmodel-with-subrouter/shared-parent/child-a">child a</a>
	</li>
	<li >
	<a href="#viewmodel-with-subrouter/shared-parent/child-b">child b</a>
	</li>
	</ul>
	<router-view></router-view>
	</template>
	export class App {
	message = 'Hello World!';

	configureRouter(config, router){
	config.title = 'Aurelia';
	config.map([
	{ route: ['','viewmodel-with-subrouter'], moduleId: './viewmodel-with-subrouter' , nav: true, title: 'viewmodel-with-subrouter' },
	]);

	this.router = router;
	}
	}
	<template>
	<div slot="somename" class="child">
	Child A
	</div>
	</template>
	import {inject} from 'aurelia-framework';
	import {SharedState} from './shared-state';
	import {EventAggregator} from 'aurelia-event-aggregator';

	@inject(SharedState,EventAggregator)
	export class ChildA {

	constructor(state, ea) {
	state.heading += '[hello from child A]';
	this.state = state;
	this.ea = ea;
	}

	attached() {
	this.subscriber = this.ea.subscribe('testEvent', response => {
	alert(response.testValue);
	});
	}

	detached(){
	this.subscriber.dispose();
	}
	}
	<template>
	<div slot="somename" class="child">
	Child B
	</div>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.shared-parent,
	.shared-parent > form {
	border: 5px solid green;
	padding: 10px;
	}
	.shared-parent > form {
	width: 50%;
	}

	.child {
	border: 5px solid blue;
	margin-top: 10px;
	padding: 10px;
	}
	</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>
	<template>
	<div class="shared-parent">
	${state.heading}
	<a click.trigger="clicked()" href="#">click here</a>
	<slot name="somename"></div>
	</div>
	</template>
	// let instance = null;

	export class SharedState {
	heading = '';
	}
	<template>
	<p>viewmodel-with-subrouter.html</p>
	<router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>

	</template>
	import {bindable} from 'aurelia-framework';

	export class ViewmodelWithSubrouter {
	@bindable router;
	heading = 'viewmodel-with-subrouter';
	configureRouter(config, router) {
	config.map([
	{ route: ['','shared-parent/child-a'], moduleId: './child-a' , nav: true, title: 'Shared Parent - child-a' },
	{ route: 'shared-parent/child-b', moduleId: './child-b', nav: true, title: 'Shared Parent - child-b' },
	]);

	this.router = router;
	}

	constructor() {}
	}