TonyLugg/app.html Secret

## app.html
<template>
  <style>
    ul { margin-bottom: 20px; }
  </style>
  <h1>Navigation Back Cancelation Test</h1>
  <ul>
    <li>Click the Next Page button to navigate to the next page.</li>
    <li>Click the Back wtih Cancel button. Notice the navigation is stopped by canDeactivate().</li>
    <li>Click the Back wtih Cancel button again. Navigation is NOT stopped, which is wrong.</li>
  </ul>
  <router-view></router-view>

</template>

## app.js
import { Router, RouterConfiguration } from 'aurelia-router';

export class App {

  configureRouter(config, router) {
    this.router = router;
    config.title = 'canDeactivate Issue';
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home' },
      { route: 'nextpage',         name: 'nextpage',   moduleId: 'nextpage' }
    ]);
  }
}

## home.html
<template>
  <h4>Home</h4>
  <div>
    <button click.trigger="btnNext_click()">Next Page</button>
  </div>
</template>

## home.js
import { Router } from 'aurelia-router';
import { inject } from 'aurelia-framework'

@inject(Router)
export class Home {

  constructor(router) {
    this.router = router;
  }

  btnNext_click() {
    this.router.navigate('nextpage');
  }
}

## index.html
<!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>

## nextpage.html
<template>
  <h4>Next Page</h4>
  <div>
    <button click.trigger="btnBackWithCancel_click()">Back with Cancel</button>
    <button click.trigger="btnBackWithProceed_click()">Back with Proceed</button>
  </div>
</template>

## nextpage.js

import { Router } from 'aurelia-router';
import { inject } from 'aurelia-framework'

@inject(Router)
export class Nextpage {
  cancelContinue = false;

  constructor(router) {
    this.router = router;
  }

  btnBackWithCancel_click() {
    this.cancelContinue = false;
    this.router.navigateBack();
  }

    btnBackWithProceed_click() {
    this.cancelContinue = true;
    this.router.navigateBack();
  }

  canDeactivate() {
    return this.cancelContinue;
  }

}
	<template>
	<style>
	ul { margin-bottom: 20px; }
	</style>
	<h1>Navigation Back Cancelation Test</h1>
	<ul>
	<li>Click the Next Page button to navigate to the next page.</li>
	<li>Click the Back wtih Cancel button. Notice the navigation is stopped by canDeactivate().</li>
	<li>Click the Back wtih Cancel button again. Navigation is NOT stopped, which is wrong.</li>
	</ul>
	<router-view></router-view>

	</template>
	import { Router, RouterConfiguration } from 'aurelia-router';

	export class App {

	configureRouter(config, router) {
	this.router = router;
	config.title = 'canDeactivate Issue';
	config.map([
	{ route: ['', 'home'], name: 'home', moduleId: 'home' },
	{ route: 'nextpage', name: 'nextpage', moduleId: 'nextpage' }
	]);
	}
	}
	<template>
	<h4>Home</h4>
	<div>
	<button click.trigger="btnNext_click()">Next Page</button>
	</div>
	</template>
	import { Router } from 'aurelia-router';
	import { inject } from 'aurelia-framework'

	@inject(Router)
	export class Home {

	constructor(router) {
	this.router = router;
	}

	btnNext_click() {
	this.router.navigate('nextpage');
	}
	}
	<!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>
	<h4>Next Page</h4>
	<div>
	<button click.trigger="btnBackWithCancel_click()">Back with Cancel</button>
	<button click.trigger="btnBackWithProceed_click()">Back with Proceed</button>
	</div>
	</template>