Skip to content

Instantly share code, notes, and snippets.

@BruceL33t

BruceL33t/app.html

Last active March 19, 2017 23:57
Show Gist options
  • Save BruceL33t/080d4ac3f4d8677d344140a7827aea94 to your computer and use it in GitHub Desktop.
Save BruceL33t/080d4ac3f4d8677d344140a7827aea94 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.html
<template>
<p>The problem with this solution is that the current state is not set correctly for Shared Parent - child a</p>
<p>This is because of duplicate "route" attributes in the app router.</p>
<p>But on the positive side - here it does at least work, setting the heading in the parent from the children by DI, which is an issue if you go the "layout view" route instead like this: <a href="https://gist.run/?id=66eeff540a4665694a31482b790bf01e">https://gist.run/?id=66eeff540a4665694a31482b790bf01e</a></a></p>
<!--<ul>
<li><a href="#shared-parent/child-a">#shared-parent/child-a</a></li>
<li><a href="#shared-parent/child-b">#shared-parent/child-b</a></li>
<li><a href="#shared-parent2/child-a">#shared-parent2/child-a</a></li>
<li><a href="#shared-parent2/child-b">#shared-parent2/child-b</a></li>
</ul>-->
<style>
.active a { color: red; font-weight: bold; }
</style>
<ul>
<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a if.bind="row.settings.childRoute" href.bind="row.href + '/' + row.settings.childRoute">${row.title}</a>
<a if.bind="!row.settings.childRoute" href.bind="row.href">${row.title}</a>
</li>
</ul>
<router-view></router-view>
</template>
Raw
app.js
export class App {
message = 'Hello World!';
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-a' }, nav: true, title: 'Shared Parent - child-a' },
{ route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-b' }, nav: true, title: 'Shared Parent - child-b' },
{ route: ['', 'shared-parent2'], moduleId: './shared-parent2', settings: { childRoute: 'child-2-a' }, nav: true, title: 'Shared Parent 2' },
]);
this.router = router;
}
}
Raw
child-2-a.html
<template>
<div class="child">
<h2>Child 2 A</h2>
Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
</div>
</template>
Raw
child-2-a.js
import {inject} from 'aurelia-framework';
import {SharedParent2} from './shared-parent2';
@inject(SharedParent2)
export class Child2A {
constructor(parent) {
this.parent = parent;
this.parent.heading = '- heading from child 2 a';
}
}
Raw
child-a.html
<template>
<div class="child">
<h2>Child A</h2>
Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
</div>
</template>
Raw
child-a.js
import {inject} from 'aurelia-framework';
import {SharedParent} from './shared-parent';
@inject(SharedParent)
export class ChildA {
constructor(parent) {
this.parent = parent;
this.parent.heading = '- heading from child a';
}
}
Raw
child-b.html
<template>
<div class="child">
<h2>Child B</h2>
Language: ${parent.language}, Dates: ${parent.fromdate || '???'} - ${parent.todate || '???'}
</div>
</template>
Raw
child-b.js
import {inject} from 'aurelia-framework';
import {SharedParent} from './shared-parent';
@inject(SharedParent)
export class ChildA {
constructor(parent) {
this.parent = parent;
this.parent.heading = '- heading from child b';
}
}
Raw
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>
Raw
shared-parent.html
<template>
<div class="shared-parent">
<h1>Shared parent ${heading}</h1>
<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>
<router-view></router-view>
</div>
</template>
Raw
shared-parent.js
import {inject, NewInstance} from 'aurelia-framework';
export class SharedParent {
fromdate = '';
todate = '';
language = 'English';
constructor() {}
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
{ route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
]);
this.router = router;
}
}
Raw
shared-parent2.html
<template>
<div class="shared-parent">
<h1>Shared Parent 2 ${heading}</h1>
<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>
<router-view></router-view>
</div>
</template>
Raw
shared-parent2.js
import {inject} from 'aurelia-framework';
export class SharedParent2 {
fromdate = '';
todate = '';
language = 'English';
constructor() {}
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: ['', 'child-2-a'], moduleId: './child-2-a', nav: true, title: 'Child 2 A' },
//{ route: 'child-2-b', moduleId: './child-2-b', nav: true, title: 'Child 2B' },
]);
this.router = router;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment