thinkOfaNumber/ app demo with layouts

## app demo with layouts
.

## app.html
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

## 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;
  }
}

## home.html
<template>
  Home
</template>

## home.js
export class Home {
}

## 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>

## 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>

## layout.js
export class Layout {
  selected = null;
  select(i) {
    console.log("selecting " + i);
    this.selected = i;
  }
}

## page.html
<template>
  Page
</template>

## page.js
export class Page {

}

## 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;
	}