AshleyGrant/app.html

## app.html
<template>
  <style>
    .active a { color: red; font-weight: bold; }
  </style>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>
</template>

## app.js
export class App {
  message = 'Hello World!';

  configureRouter(config, router){
    config.title = 'Aurelia';
    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;
  }
}

## child-a.html
<template>
  <div slot="somename" class="child">
    <h2>Child A</h2>
    Language: ${state.language}<br />
    Parent Creation Time: ${parent.creationTime}
  </div>
</template>

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

@inject(SharedState, SharedParent)
export class ChildA {
  constructor(state, parent) {
    this.state = state;
    this.parent = parent;
    this.state.language = 'French';

    console.log(this.parent.creationTime);
  }

  activate() {
    this.intervalId = setInterval(() => {
      this.parent.heading+='A';
      const substring = this.state.heading.length < 9 ? this.state.heading : this.state.heading.substring(0,9);
      this.state.heading = `A${substring}`;
    }, 1000);
  }

  deactivate() {
    clearInterval(this.intervalId);
  }
}

## child-b.html
<template>
  <div slot="somename"  class="child">
    <h2>Child B</h2>
    Language: ${state.language}<br />
    Parent Creation Time: ${parent.creationTime}
  </div>
</template>

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

@inject(SharedState, Parent.of(SharedParent))
export class ChildB {
  constructor(state, parent) {
    this.state = state;
    this.parent = parent;
    this.state.language = 'German';

    console.log(this.parent.creationTime);
  }

  activate() {
    this.intervalId = setInterval(() => {
      this.parent.heading+='B';
      const substring = this.state.heading.length < 9 ? this.state.heading : this.state.heading.substring(0,9);
      this.state.heading = `B${substring}`;
    }, 1000);
  }

  deactivate() {
    clearInterval(this.intervalId);
  }
}

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

## shared-parent.html
<template>
  <div class="shared-parent">
    <p>The goal is to be able to update "heading" on this (the SharedParent and/or in the SharedState) view, whenever it is changed from the child.</p>
    <p>I suspect this is a problem with the layout-view and layout-view-model on the Aurelia router custom element</p>
    <p>I need this since the SharedParent in the real code, will have some general calculation functions (saved in variables in the SharedParent, which currently is not updated in the view) etc which the children will be calling. Ideally referencing the DI reference of the SharedParent</p>
    <p>The ideal solution enables direct modification on the parent. The SharedState was just an extra way of testing, and can be ignored, if you can see a way to get it working with option 1)</p>
    <p><strong>Option 1 is my highest priority to get working</strong></p>
    <p></p>
    <h1>1)Heading (from child, local): ${heading}</h1>
    <h2>2)Heading (from child, shared state): ${state.heading}</h1>
    <h2>3)Class creation time: ${creationTime}</h2>
    <br/>
    <form>
      <label>Language: <input type="text" value.bind="state.language"></label>
      <label>From Date: <input type="date" value.bind="state.fromdate"></label>
      <label>To Date: <input type="date" value.bind="state.todate"></label>
    </form>

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

## shared-parent.js
import {inject, NewInstance, bindable} from 'aurelia-framework';
import {BindingSignaler} from 'aurelia-templating-resources';
import {SharedState} from './shared-state';

@inject(SharedState, BindingSignaler)
export class SharedParent {
  constructor(state, signaler) {
    this.state = state;
    this.heading = 'Shared Parent';
    this.signaler = signaler;
    this.creationTime = new Date().toString();
  }
}

## shared-state.js
export class SharedState {
  fromdate = '';
  todate = '';
  language = 'English';
  heading = ''
}
	<template>
	<style>
	.active a { color: red; font-weight: bold; }
	</style>
	<ul>
	<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
	<a href.bind="row.href">${row.title}</a>
	</li>
	</ul>
	<router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>
	</template>
	export class App {
	message = 'Hello World!';

	configureRouter(config, router){
	config.title = 'Aurelia';
	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;
	}
	}
	<template>
	<div slot="somename" class="child">
	<h2>Child A</h2>
	Language: ${state.language}<br />
	Parent Creation Time: ${parent.creationTime}
	</div>
	</template>
	import {inject, Parent} from 'aurelia-framework';
	import {SharedState} from './shared-state';
	import {SharedParent} from './shared-parent';

	@inject(SharedState, SharedParent)
	export class ChildA {
	constructor(state, parent) {
	this.state = state;
	this.parent = parent;
	this.state.language = 'French';

	console.log(this.parent.creationTime);
	}

	activate() {
	this.intervalId = setInterval(() => {
	this.parent.heading+='A';
	const substring = this.state.heading.length < 9 ? this.state.heading : this.state.heading.substring(0,9);
	this.state.heading = `A${substring}`;
	}, 1000);
	}

	deactivate() {
	clearInterval(this.intervalId);
	}
	}
	<template>
	<div slot="somename" class="child">
	<h2>Child B</h2>
	Language: ${state.language}<br />
	Parent Creation Time: ${parent.creationTime}
	</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">
	<p>The goal is to be able to update "heading" on this (the SharedParent and/or in the SharedState) view, whenever it is changed from the child.</p>
	<p>I suspect this is a problem with the layout-view and layout-view-model on the Aurelia router custom element</p>
	<p>I need this since the SharedParent in the real code, will have some general calculation functions (saved in variables in the SharedParent, which currently is not updated in the view) etc which the children will be calling. Ideally referencing the DI reference of the SharedParent</p>
	<p>The ideal solution enables direct modification on the parent. The SharedState was just an extra way of testing, and can be ignored, if you can see a way to get it working with option 1)</p>
	<p><strong>Option 1 is my highest priority to get working</strong></p>
	<p></p>
	<h1>1)Heading (from child, local): ${heading}</h1>
	<h2>2)Heading (from child, shared state): ${state.heading}</h1>
	<h2>3)Class creation time: ${creationTime}</h2>
	<br/>
	<form>
	<label>Language: <input type="text" value.bind="state.language"></label>
	<label>From Date: <input type="date" value.bind="state.fromdate"></label>
	<label>To Date: <input type="date" value.bind="state.todate"></label>
	</form>

	<slot name="somename"></slot>
	</div>
	</template>
	import {inject, NewInstance, bindable} from 'aurelia-framework';
	import {BindingSignaler} from 'aurelia-templating-resources';
	import {SharedState} from './shared-state';

	@inject(SharedState, BindingSignaler)
	export class SharedParent {
	constructor(state, signaler) {
	this.state = state;
	this.heading = 'Shared Parent';
	this.signaler = signaler;
	this.creationTime = new Date().toString();
	}
	}
	export class SharedState {
	fromdate = '';
	todate = '';
	language = 'English';
	heading = ''
	}