BruceL33t/app.html

## 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>

## 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;
  }
}

## child-a.html
<template>
  <div slot="somename" class="child">
    <h2>Child A</h2>
    Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
  </div>
</template>

## child-a.js
import {inject, bindable, bindingMode} from 'aurelia-framework';
import {SharedParent} from './shared-parent';

@inject(new Scoped(SharedParent))
export class ChildA {

  constructor(parent) {
    console.log(parent);
    parent.heading = "dkjlsdfsf"


  }
}


## child-b.html
<template>
  <div slot="somename" class="child">
    <h2>Child B</h2>
    Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
  </div>
</template>

## child-b.js
import {inject, Parent, bindable, bindingMode} from 'aurelia-framework';
import {SharedParent} from './shared-parent';

@inject(SharedParent)
export class ChildB {

  constructor(parent) {
    alert("childb")
    let self = this;
    this.parent = parent;
    this.parent.heading+='3';
    this.registerSingleton(parent);
  }
}

## 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>

## scoped.js
import {Resolver} from 'aurelia-framework';

export class Scoped extends Resolver {
  constructor(key){
    super();
    this.key = key;
  }

  get(container){
    if(!container.hasHandler(this.key)){
      container.registerSingleton(this.key);
    }

    return container.get(this.key);
  }
}

## shared-parent.html
<template>
  <div class="shared-parent">
    <h1>1)Heading (from child, local): ${heading }</h1>

    <br/>
    <br/>
    <form>
      <label>Language: <input type="text" value.bind="language"></label>
      <label>From Date: <input type="date" value.bind="fromdate"></label>
      <label>To Date: <input type="date" value.bind="todate"></label>
    </form>

    <slot name="somename"></div>
  </div>
</template>

## shared-parent.js
import {inject, autoinject, Container, bindable, bindingMode, singleton} from 'aurelia-framework';
import {BindingSignaler} from 'aurelia-templating-resources';

let root = new Container();
let child = root.createChild();

@autoinject
export class SharedParent {
  todate = '';
  fromdate = '';
  language = 'English';

  constructor(container) {
    console.log(container === root);  // false
    console.log(container === child); // true
    this.heading = 'shared parent'
  }


}

child.get(new Scoped(Test));

## 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>

## 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">
	<h2>Child A</h2>
	Language: ${parent.language}, Dates: ${parent.fromdate \|\| '???'} - ${parent.todate \|\| '???'}
	</div>
	</template>
	import {inject, bindable, bindingMode} from 'aurelia-framework';
	import {SharedParent} from './shared-parent';

	@inject(new Scoped(SharedParent))
	export class ChildA {

	constructor(parent) {
	console.log(parent);
	parent.heading = "dkjlsdfsf"


	}
	}
	<template>
	<div slot="somename" class="child">
	<h2>Child B</h2>
	Language: ${parent.language}, Dates: ${parent.fromdate \|\| '???'} - ${parent.todate \|\| '???'}
	</div>
	</template>
	import {inject, Parent, bindable, bindingMode} from 'aurelia-framework';
	import {SharedParent} from './shared-parent';

	@inject(SharedParent)
	export class ChildB {

	constructor(parent) {
	alert("childb")
	let self = this;
	this.parent = parent;
	this.parent.heading+='3';
	this.registerSingleton(parent);
	}
	}
	<!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>
	import {Resolver} from 'aurelia-framework';

	export class Scoped extends Resolver {
	constructor(key){
	super();
	this.key = key;
	}

	get(container){
	if(!container.hasHandler(this.key)){
	container.registerSingleton(this.key);
	}

	return container.get(this.key);
	}
	}
	<template>
	<div class="shared-parent">
	<h1>1)Heading (from child, local): ${heading }</h1>

	<br/>
	<br/>
	<form>
	<label>Language: <input type="text" value.bind="language"></label>
	<label>From Date: <input type="date" value.bind="fromdate"></label>
	<label>To Date: <input type="date" value.bind="todate"></label>
	</form>

	<slot name="somename"></div>
	</div>
	</template>
	import {inject, autoinject, Container, bindable, bindingMode, singleton} from 'aurelia-framework';
	import {BindingSignaler} from 'aurelia-templating-resources';

	let root = new Container();
	let child = root.createChild();

	@autoinject
	export class SharedParent {
	todate = '';
	fromdate = '';
	language = 'English';

	constructor(container) {
	console.log(container === root); // false
	console.log(container === child); // true
	this.heading = 'shared parent'
	}


	}

	child.get(new Scoped(Test));