AshleyGrant/app.html

## app.html
<template>
  <require from="stringify"></require>
  <h1>${message}</h1>

  <div repeat.for="i of arr">
    i = ${i}
    <br/>
    $parent.message = ${$parent.message}
    <br/>
    $parent.someVar = ${$parent.someVar}
    <br/>
    $parent = ${$parent}
    <br/>
    $parent.message with conveter = ${$parent.message | stringify}
    <br/>
    $parent.someVar with conveter = ${$parent.someVar | stringify}
    <br ref="temp" parent.bind="$parent"/>
    <!--
    uncomment this to show the buggy behaviour -->
    $parent with conveter = ${ temp.parent | stringify}

  </div>
</template>

## app.js
export class App {
  message = 'Hello World!';
  someVar = {a: 12};
  arr = [1]
}

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

## stringify.js
export class stringifyValueConverter
{
  toView(obj)
  {
    return "Converted " + (obj && JSON.stringify(obj));
  }
}
	<template>
	<require from="stringify"></require>
	<h1>${message}</h1>

	<div repeat.for="i of arr">
	i = ${i}
	<br/>
	$parent.message = ${$parent.message}
	<br/>
	$parent.someVar = ${$parent.someVar}
	<br/>
	$parent = ${$parent}
	<br/>
	$parent.message with conveter = ${$parent.message \| stringify}
	<br/>
	$parent.someVar with conveter = ${$parent.someVar \| stringify}
	<br ref="temp" parent.bind="$parent"/>
	<!--
	uncomment this to show the buggy behaviour -->
	$parent with conveter = ${ temp.parent \| stringify}

	</div>
	</template>
	export class App {
	message = 'Hello World!';
	someVar = {a: 12};
	arr = [1]
	}
	<!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>
	export class stringifyValueConverter
	{
	toView(obj)
	{
	return "Converted " + (obj && JSON.stringify(obj));
	}
	}