Skip to content

Instantly share code, notes, and snippets.

@jsobell
Created June 23, 2016 07:44
Show Gist options
  • Select an option

  • Save jsobell/c6cc45aa1486403ef6ccc209e83baa48 to your computer and use it in GitHub Desktop.

Select an option

Save jsobell/c6cc45aa1486403ef6ccc209e83baa48 to your computer and use it in GitHub Desktop.
navigationStrategy example with 2 viewports
<template> This is in test1 for an ADMINISTRATOR!</template>
export class adminTest1 {
}
<template>
<style>
.a { background: red; }
.b { background: green; }
.c { color: blue; }
</style>
<ul>
<li repeat.for='r of router.navigation'><a href='${r.href}'>Go to ${r.title}</a></li>
</ul>
<h1>${message}</h1>
Class:<input value.bind='what'>
<h4>
${data}
</h4>
A [<router-view name='A'></router-view>]<br></br>
B [<router-view name='B'></router-view>]
</template>
import adminTest1 from './adminTest1';
import {Aurelia, autoinject, Container} from 'aurelia-framework';
@autoinject()
export class App {
constructor() {
console.warn(require.specified('./test1'));
}
router;
role='user';
ticked = false;
message = 'Hello World!';
get getRoute() {
return 'home';
}
configureRouter(config: RouterConfiguration, router: Router) {
this.router = router;
config.title = 'Test app';
config.map([
{ route: '/', name: 'root', title:'Home', nav: false,
navigationStrategy: this.navigateToModule,
viewPorts: {
A: {
moduleId: 'test1-A'
},
B: {
moduleId: 'test2'
},
},
},
]);
}
navigateToModule = (instruction) => {
console.log(this.role, typeof adminTest1);
console.log('instruction',instruction);
instruction.config.moduleId = this.ticked ? 'test1' : 'test2';
console.log(this.ticked, 'so Navigating to', instruction.config.moduleId);
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>This is in test1 (A)!</template>
export class test1A {
}
<template>This is in test1 (B)!</template>
export class test1B {
}
<template>This is in test2!</template>
export class test2 {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment