BruceL33t/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: ${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(SharedParent)
export class ChildA {

  constructor(parent) {
    let self = this;
    this.parent = parent;
    setInterval(() => {
      this.parent.heading+='2';
    }, 1000);
  }
}

## 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} from 'aurelia-framework';
import {SharedParent} from './shared-parent';

@inject(SharedParent)
export class ChildB {
  constructor(parent) {
    let self = this;
    this.parent = parent;
    setInterval(() => {
      self.parent.heading+='3'; // doesn't seem to work
    }, 1000);
  }
}

## 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) 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.
    <p><strong>Option 1 is my highest priority to get working</strong></p>
    <p></p>
    <h1>1)Heading (from child, local): ${heading }</h1>
    <h3 style="display:inline;">It should work like this:</h3> <span>Heading (from local, local): ${headingLocal}</span>
    <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"></slot>
  </div>
</template>

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

@singleton(true)
@inject(BindingSignaler)
export class SharedParent {
  todate = '';
  fromdate = '';
  language = 'English';

  constructor(signaler) {
    let self = this;
    this.heading = 'Shared Parent';
    this.signaler = signaler
    this.headingLocal = '';


    setInterval(() => {
      self.headingLocal+='1';
      self.signaler.signal('my-signal')
    }, 1000);
  }


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

	@inject(SharedParent)
	export class ChildA {

	constructor(parent) {
	let self = this;
	this.parent = parent;
	setInterval(() => {
	this.parent.heading+='2';
	}, 1000);
	}
	}
	<template>
	<div slot="somename" class="child">
	<h2>Child B</h2>
	Language: ${parent.language}, Dates: ${parent.fromdate \|\| '???'} - ${parent.todate \|\| '???'}
	</div>
	</template>
	import {inject} from 'aurelia-framework';
	import {SharedParent} from './shared-parent';

	@inject(SharedParent)
	export class ChildB {
	constructor(parent) {
	let self = this;
	this.parent = parent;
	setInterval(() => {
	self.parent.heading+='3'; // doesn't seem to work
	}, 1000);
	}
	}
	<!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) 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.
	<p><strong>Option 1 is my highest priority to get working</strong></p>
	<p></p>
	<h1>1)Heading (from child, local): ${heading }</h1>
	<h3 style="display:inline;">It should work like this:</h3> <span>Heading (from local, local): ${headingLocal}</span>
	<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"></slot>
	</div>
	</template>
	import {inject, bindable, bindingMode, singleton} from 'aurelia-framework';
	import {BindingSignaler} from 'aurelia-templating-resources';

	@singleton(true)
	@inject(BindingSignaler)
	export class SharedParent {
	todate = '';
	fromdate = '';
	language = 'English';

	constructor(signaler) {
	let self = this;
	this.heading = 'Shared Parent';
	this.signaler = signaler
	this.headingLocal = '';



	setInterval(() => {
	self.headingLocal+='1';
	self.signaler.signal('my-signal')
	}, 1000);
	}


	}