BruceL33t · March 25, 2017 16:08
diff --git a/app.html b/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>
diff --git a/app.js b/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;
  }
 }
diff --git a/child-a.html b/child-a.html
 <template>
  <div slot="somename" class="child">
    <h2>Child A</h2>
    Language: ${parent.language & signal:'my-signal'}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
  </div>
 </template>
diff --git a/child-a.js b/child-a.js
 import {inject, bindable, bindingMode} from 'aurelia-framework';
 import {SharedParent} from './shared-parent';
 import {BindingSignaler} from 'aurelia-templating-resources';

 @inject(SharedParent, BindingSignaler)
 export class ChildA {
  @bindable ({defaultBindingMode: bindingMode.twoWay}) parent;
  
  constructor(parent, signaler) {
    let self = this;
    this.parent = parent;
    this.signaler = signaler;
    setInterval(() => {
      self.parent.heading+='1';
      console.log(self.parent.language)
      signaler.signal('my-signal') // shared parent view is not updated
    }, 1000);
  }
 }
diff --git a/child-b.html b/child-b.html
 <template>
  <div slot="somename" class="child">
    <h2>Child B</h2>
    Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
  </div>
 </template>
diff --git a/child-b.js b/child-b.js
 import {inject} from 'aurelia-framework';
 import {SharedParent} from './shared-parent';
 import {BindingSignaler} from 'aurelia-templating-resources';

 @inject(SharedParent, BindingSignaler)
 export class ChildB {
  constructor(parent, signaler) {
    let self = this;
    this.parent = parent;
    this.signaler = signaler;
    setInterval(() => {
      self.parent.heading+='1'; // doesn't seem to work
      signaler.signal('my-signal') // shared parent view is not updated
    }, 1000);
  }
 }
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">
    <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 & signal:'my-signal'}</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>
diff --git a/shared-parent.js b/shared-parent.js
 import {inject, bindable, bindingMode} from 'aurelia-framework';
 import {BindingSignaler} from 'aurelia-templating-resources';

 @inject(BindingSignaler)
 export class SharedParent {
  @bindable ({defaultBindingMode: bindingMode.twoWay}) todate;
  @bindable ({defaultBindingMode: bindingMode.twoWay}) fromdate;
  @bindable ({defaultBindingMode: bindingMode.twoWay}) language;
  
  constructor(signaler) {
    let self = this;
    this.heading = 'Shared Parent';
    this.signaler = signaler
    this.headingLocal = '';
    
    // for some odd reason I had to set these values inside the constructor, instead of above :/
    this.todate = '';
    this.fromdate = '';
    this.language = 'English';
    
    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 & signal:'my-signal'}, Dates: ${parent.fromdate \|\| '???'} - ${parent.todate \|\| '???'}
	</div>
	</template>
	import {inject, bindable, bindingMode} from 'aurelia-framework';
	import {SharedParent} from './shared-parent';
	import {BindingSignaler} from 'aurelia-templating-resources';

	@inject(SharedParent, BindingSignaler)
	export class ChildA {
	@bindable ({defaultBindingMode: bindingMode.twoWay}) parent;

	constructor(parent, signaler) {
	let self = this;
	this.parent = parent;
	this.signaler = signaler;
	setInterval(() => {
	self.parent.heading+='1';
	console.log(self.parent.language)
	signaler.signal('my-signal') // shared parent view is not updated
	}, 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';
	import {BindingSignaler} from 'aurelia-templating-resources';

	@inject(SharedParent, BindingSignaler)
	export class ChildB {
	constructor(parent, signaler) {
	let self = this;
	this.parent = parent;
	this.signaler = signaler;
	setInterval(() => {
	self.parent.heading+='1'; // doesn't seem to work
	signaler.signal('my-signal') // shared parent view is not updated
	}, 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 & signal:'my-signal'}</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} from 'aurelia-framework';
	import {BindingSignaler} from 'aurelia-templating-resources';

	@inject(BindingSignaler)
	export class SharedParent {
	@bindable ({defaultBindingMode: bindingMode.twoWay}) todate;
	@bindable ({defaultBindingMode: bindingMode.twoWay}) fromdate;
	@bindable ({defaultBindingMode: bindingMode.twoWay}) language;

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

	// for some odd reason I had to set these values inside the constructor, instead of above :/
	this.todate = '';
	this.fromdate = '';
	this.language = 'English';

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


	}