thinkOfaNumber · August 9, 2017 20:02
diff --git a/app demo with layouts b/app demo with layouts
 .
diff --git a/app.html b/app.html
 <template>
  <div>
    <router-view></router-view>
  </div>
 </template>
diff --git a/app.js b/app.js
 export class App {
  configureRouter(config, router){
    config.map([
      { route: '', name: 'home', moduleId: 'home', layoutView: "layout.html", layoutViewModel: "layout" },
      { route: 'page', name: 'page', moduleId: 'page', layoutView: "layout.html", layoutViewModel: "layout" }
    ]);

    this.router = router;
  }
 }
diff --git a/home.html b/home.html
 <template>
  Home
 </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</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://rawgit.com/jedd-ahyoung/aurelia-bundle/master/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
diff --git a/layout.html b/layout.html
 <template>
  First click one of these:
  <ul>
    <li repeat.for="i of 3" click.delegate="select(i)" class="${selected===i ? 'active' : ''}">Menu item ${i+1}</li>
  </ul>
  Now click a link:<br/>
  <a route-href="route: page">Go to page</a><br/>
  <a route-href="route: home">Go to home</a><br/>
  Layout Contents:
  <div class="layout">
    <slot></slot>
  </div>
 </template>
diff --git a/layout.js b/layout.js
 export class Layout {
  selected = null;
  select(i) {
    console.log("selecting " + i);
    this.selected = i;
  }
 }
diff --git a/page.html b/page.html
 <template>
  Page
 </template>
diff --git a/page.js b/page.js
 export class Page {
  
 }
diff --git a/style.css b/style.css
 .layout {
    display: block;
    border: 2px groove;
 }

 .legend {
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
 }

 .active {
  text-decoration: underline;
  text-transform: uppercase;
 }
	export class App {
	configureRouter(config, router){
	config.map([
	{ route: '', name: 'home', moduleId: 'home', layoutView: "layout.html", layoutViewModel: "layout" },
	{ route: 'page', name: 'page', moduleId: 'page', layoutView: "layout.html", layoutViewModel: "layout" }
	]);

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="style.css" rel="stylesheet">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://rawgit.com/jedd-ahyoung/aurelia-bundle/master/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	First click one of these:
	<ul>
	<li repeat.for="i of 3" click.delegate="select(i)" class="${selected===i ? 'active' : ''}">Menu item ${i+1}</li>
	</ul>
	Now click a link:<br/>
	<a route-href="route: page">Go to page</a><br/>
	<a route-href="route: home">Go to home</a><br/>
	Layout Contents:
	<div class="layout">
	<slot></slot>
	</div>
	</template>
	export class Layout {
	selected = null;
	select(i) {
	console.log("selecting " + i);
	this.selected = i;
	}
	}
	.layout {
	display: block;
	border: 2px groove;
	}

	.legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
	border: none;
	}

	.active {
	text-decoration: underline;
	text-transform: uppercase;
	}