Skip to content

Instantly share code, notes, and snippets.

@BruceL33t
Last active March 25, 2017 16:08
Show Gist options
  • Save BruceL33t/66eeff540a4665694a31482b790bf01e to your computer and use it in GitHub Desktop.
Save BruceL33t/66eeff540a4665694a31482b790bf01e to your computer and use it in GitHub Desktop.
<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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment