SaucyJack · February 18, 2020 23:06
diff --git a/app.html b/app.html
 <template>
  <nav>
    <ul>
      <li repeat.for="x of router.navigation">
        <a href.bind="x.href">${x.title}</a>
      </li>
    </ul>
  </nav>
  <router-view></router-view>
 </template>
diff --git a/app.js b/app.js
 import { autoinject} from 'aurelia-dependency-injection';
 import { Router, RouterConfiguration } from 'aurelia-router';

 export class App {
  router;

  constructor() {
  }
  
  configureRouter(config, router) {
    this.router = router;
    config.title = "Router Nesting";
    config.map([
      { route: '', name: 'home', moduleId: './home', nav: false },
      { route: 'reporting-index', name: 'reportingIndex', moduleId: './reporting-index', nav: true, title: 'Reporting' }
      ]);
  }
 }
diff --git a/home.html b/home.html
 <template>
  <h1>Home</h1>
 </template>
diff --git a/home.js b/home.js
 export class Home {
  
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia Bootstrap Radio Button Group</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
diff --git a/main.js b/main.js
 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(a => a.setRoot());
 }
diff --git a/one.html b/one.html
 <template>
  <h3>${title}</h3>
 </template>
diff --git a/one.js b/one.js
 export class One {
  title;
  
  constructor() {
    this.title = 'This is the One screen.';
  }
 }
diff --git a/reporting-index.html b/reporting-index.html
 <template>
  <h2>${pageTitle}</h2>
  <select value.bind="selectedItem" change.delegate="selectionChanged(selectedItem)">
    <!-- use value.bind for selectedItem and model.bind for each route -->
    <option repeat.for="x of router.navigation" model.bind="x">${x.title}</option>
  </select>
  <router-view></router-view>
 </template>
diff --git a/reporting-index.js b/reporting-index.js
 import { autoinject} from 'aurelia-dependency-injection';
 import { Router, RouterConfiguration } from 'aurelia-router';

 export class ReportingIndex {
  pageTitle;
  router;
  selectedItem;
  
  constructor() {
    this.pageTitle = 'Reporting';
    //setting this initial value does not set a default value when the page loads!
    this.selectedItem = 'zero';
  }
  
  configureRouter(config, router) {
    //if you don't set a default map (route: ''), this will bomb the whole site
    config.map([
      { route: ['','zero'], name: 'zero', moduleId: './zero', nav: true, title: 'Select...' },
      { route: 'one', name: 'one', moduleId: './one', nav: true, title: 'First' },
      { route: 'two', name: 'two', moduleId: './two', nav: true, title: 'Second' },
      { route: 'three', name: 'three', moduleId: './three', nav: true, title: 'Third' }
    ]);
    this.router = router;
  }
  
  selectionChanged(route) {
    //in this case, route is the router.navigation item for the selected option
    //this does NOT parallel the route object itself, hence using the relativeHref property
    //the only properties that seem useful here are 'href' and 'relativeHref'
    //in this case, relativeHref works with navgigateToRoute because each route is a unique name
    //better practice would be to use the Href and have everything be path-relative to the child-router's parent
    this.router.navigateToRoute(route.relativeHref);
  }
 }
diff --git a/three.html b/three.html
 <template>
  <h3>${title}</h3>
 </template>
diff --git a/three.js b/three.js
 export class Three {
  title;
  
  constructor() {
    this.title = 'HA HA HO HO THREE HA HA HO HO!!';
  }
 }
diff --git a/two.html b/two.html
 <template>
  <h3>${title}</h3>
 </template>
diff --git a/two.js b/two.js
 export class Two {
  title;
  
  constructor() {
    this.title = 'This is the TWO screen.';
  }
 }
diff --git a/zero.html b/zero.html
 <template>
  <h3>Select a route from the dropdown</h3>
 </template>
diff --git a/zero.js b/zero.js
 export class Zero {
  
 }
	<template>
	<nav>
	<ul>
	<li repeat.for="x of router.navigation">
	<a href.bind="x.href">${x.title}</a>
	</li>
	</ul>
	</nav>
	<router-view></router-view>
	</template>
	import { autoinject} from 'aurelia-dependency-injection';
	import { Router, RouterConfiguration } from 'aurelia-router';

	export class App {
	router;

	constructor() {
	}

	configureRouter(config, router) {
	this.router = router;
	config.title = "Router Nesting";
	config.map([
	{ route: '', name: 'home', moduleId: './home', nav: false },
	{ route: 'reporting-index', name: 'reportingIndex', moduleId: './reporting-index', nav: true, title: 'Reporting' }
	]);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia Bootstrap Radio Button Group</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(a => a.setRoot());
	}
	export class One {
	title;

	constructor() {
	this.title = 'This is the One screen.';
	}
	}
	<template>
	<h2>${pageTitle}</h2>
	<select value.bind="selectedItem" change.delegate="selectionChanged(selectedItem)">
	<!-- use value.bind for selectedItem and model.bind for each route -->
	<option repeat.for="x of router.navigation" model.bind="x">${x.title}</option>
	</select>
	<router-view></router-view>
	</template>
	import { autoinject} from 'aurelia-dependency-injection';
	import { Router, RouterConfiguration } from 'aurelia-router';

	export class ReportingIndex {
	pageTitle;
	router;
	selectedItem;

	constructor() {
	this.pageTitle = 'Reporting';
	//setting this initial value does not set a default value when the page loads!
	this.selectedItem = 'zero';
	}

	configureRouter(config, router) {
	//if you don't set a default map (route: ''), this will bomb the whole site
	config.map([
	{ route: ['','zero'], name: 'zero', moduleId: './zero', nav: true, title: 'Select...' },
	{ route: 'one', name: 'one', moduleId: './one', nav: true, title: 'First' },
	{ route: 'two', name: 'two', moduleId: './two', nav: true, title: 'Second' },
	{ route: 'three', name: 'three', moduleId: './three', nav: true, title: 'Third' }
	]);
	this.router = router;
	}

	selectionChanged(route) {
	//in this case, route is the router.navigation item for the selected option
	//this does NOT parallel the route object itself, hence using the relativeHref property
	//the only properties that seem useful here are 'href' and 'relativeHref'
	//in this case, relativeHref works with navgigateToRoute because each route is a unique name
	//better practice would be to use the Href and have everything be path-relative to the child-router's parent
	this.router.navigateToRoute(route.relativeHref);
	}
	}
	export class Three {
	title;

	constructor() {
	this.title = 'HA HA HO HO THREE HA HA HO HO!!';
	}
	}
	export class Two {
	title;

	constructor() {
	this.title = 'This is the TWO screen.';
	}
	}
	<template>
	<h3>Select a route from the dropdown</h3>
	</template>