jdanyow/app.html

## app.html
<template>
  <require from="./debug"></require>

  <input value.bind="foo.bar.baz">

  <debug></debug>
</template>

## app.js
export class App {
  foo = null;
}

## debug.html
<template>
  <pre><code>${json}</code></pre>
</template>

## debug.js
export class Debug {
  bindingContext = null;

  updateJson() {
    if (this.bindingContext === null) {
      this.json = 'null';
    } else if (this.bindingContext === undefined) {
      this.json = 'undefined'
    } else {
      // todo: use a stringify function that can handle circular references.
      this.json = JSON.stringify(this.bindingContext, null, 2);
    }
  }

  bind(bindingContext) {
    this.bindingContext = bindingContext;
    this.updateJson();
    this.interval = setInterval(::this.updateJson, 150);
  }

  unbind() {
    this.bindingContext = null;
    clearInterval(this.interval);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main.js">
    <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>

## main.js
// disable automatic object creation:
import {AccessMember} from 'aurelia-framework';

AccessMember.prototype.assign = function(scope, value) {
  let instance = this.object.evaluate(scope);

  if(instance === null || instance === undefined) {
    return;
  }

  return instance[this.name] = value;
}
// <end> disable automatic object creation

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<require from="./debug"></require>

	<input value.bind="foo.bar.baz">

	<debug></debug>
	</template>
	export class Debug {
	bindingContext = null;

	updateJson() {
	if (this.bindingContext === null) {
	this.json = 'null';
	} else if (this.bindingContext === undefined) {
	this.json = 'undefined'
	} else {
	// todo: use a stringify function that can handle circular references.
	this.json = JSON.stringify(this.bindingContext, null, 2);
	}
	}

	bind(bindingContext) {
	this.bindingContext = bindingContext;
	this.updateJson();
	this.interval = setInterval(::this.updateJson, 150);
	}

	unbind() {
	this.bindingContext = null;
	clearInterval(this.interval);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main.js">
	<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>
	// disable automatic object creation:
	import {AccessMember} from 'aurelia-framework';

	AccessMember.prototype.assign = function(scope, value) {
	let instance = this.object.evaluate(scope);

	if(instance === null \|\| instance === undefined) {
	return;
	}

	return instance[this.name] = value;
	}
	// <end> disable automatic object creation

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}