Skip to content

Instantly share code, notes, and snippets.

@rdemetrescu

rdemetrescu/app.html

Last active October 27, 2017 14:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rdemetrescu/2cbb0255f2077c30921810bff766de3c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rdemetrescu/2cbb0255f2077c30921810bff766de3c to your computer and use it in GitHub Desktop.
Download ZIP
Issues with child routers and view router with layout
Raw
app.html
<template>
<require from="./nav-bar"></require>
<h1>Main router</h1>
<div>
<label>
<input type="checkbox" checked.bind="useLayout">
Use custom layout
</label>
</div>
<nav-bar router.bind="router"></nav-bar>
<router-view if.bind="!useLayout"></router-view>
<router-view layout-view="layout.html" if.bind="useLayout"></router-view>
</template>
Raw
app.js
export class App {
constructor() {
this.useLayout = false;
}
configureRouter(config, router) {
this.router = router;
config.title = 'Aurelia';
config.map([
{ route: ['child1', ''], name: 'child1', moduleId: './child1', nav: true, title: 'Child 1' },
{ route: 'child2', name: 'child2', moduleId: './child2', nav: true, title: 'Child 2' }
]);
}
}
Raw
child1.html
<template>
<require from="./nav-bar"></require>
<div slot="myslot">
<h2>Child 1</h2>
<nav-bar router.bind="router"></nav-bar>
<router-view></router-view>
</div>
</template>
Raw
child1.js
export class Child1 {
configureRouter(config, router) {
this.router = router;
config.map([
{ route: ['page1', ''], name: 'page1', moduleId: './page1', nav: true, title: 'page 1' },
{ route: 'page2', name: 'page2', moduleId: './page2', nav: true, title: 'page 2' }
]);
}
}
Raw
child2.html
<template>
<require from="./nav-bar"></require>
<div slot="myslot">
<h2>Child 2</h2>
<nav-bar router.bind="router"></nav-bar>
<router-view></router-view>
</div>
</template>
Raw
child2.js
export class Child2 {
configureRouter(config, router) {
this.router = router;
config.map([
{ route: ['page3', ''], name: 'page3', moduleId: './page3', nav: true, title: 'page 3' },
{ route: 'page4', name: 'page4', moduleId: './page4', nav: true, title: 'page 4' }
]);
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</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
layout.html
<template>
<div style="border: 5px dashed red; padding: 20px">
<p>inside layout.html</p>
<slot name="myslot"></slot>
</div>
</template>
Raw
nav-bar.html
<template>
<ul repeat.for="nav of router.navigation">
<li><a href.bind="nav.href" class="${nav.isActive ? 'active' : ''}">${nav.title}</a></li>
</ul>
</template>
Raw
nav-bar.js
import { bindable } from 'aurelia-framework';
export class NavBar {
@bindable() router;
}
Raw
page1.html
<template>
<h3>Page 1</h3>
</template>
Raw
page1.js
export class Page1 {
}
Raw
page2.html
<template>
<h3>Page 2</h3>
</template>
Raw
page2.js
export class Page2 {
}
Raw
page3.html
<template>
<h3>Page 3</h3>
</template>
Raw
page3.js
export class Page3 {
}
Raw
page4.html
<template>
<h3>Page 4</h3>
</template>
Raw
page4.js
export class Page4 {
}
Raw
styles.css
.active { color: red; font-weight:bold; };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment