sylvain-hamel/app.html

## app.html
<template>

  <div>
    foo.value <input type="text" value.bind="foo.value">
  </div>

  <div>
  bar.value <input type="text" value.bind="bar.value">
  </div>

  <hr/>
  <p>foo.value is the source, bar.value is the target</p>
  <button click.trigger="start()">Start sync</button>
  <button click.trigger="stop()">Stop sync</button>

</template>

## app.js
import {BindingEngine, bindingMode} from 'aurelia-binding';
import {inject} from 'aurelia-framework';
import {Foo} from './foo'
import {Bar} from './bar'

@inject(BindingEngine)
export class App {
  foo = new Foo();
  bar = new Bar();

  constructor(bindingEngine){
    this.bindingEngine = bindingEngine;
    console.log()

  }

  stop(  ){
    this.binding.unbind();
    this.binding = undefined;
  }

  start(){
    let expression = this.bindingEngine.createBindingExpression('value', 'value', bindingMode.twoWay);
    this.binding = expression.createBinding(this.bar);
    let scope = {foo: this.foo, bindingContext: this.foo};
    this.binding.bind(scope);
  }
}

## bar.js
export class Bar{
  constructor(){
    this.value = 50;
  }
}

## foo.js
export class Foo{
  constructor(){
    this.value = 10;
  }
}

## 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://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>
	<template>

	<div>
	foo.value <input type="text" value.bind="foo.value">
	</div>

	<div>
	bar.value <input type="text" value.bind="bar.value">
	</div>

	<hr/>
	<p>foo.value is the source, bar.value is the target</p>
	<button click.trigger="start()">Start sync</button>
	<button click.trigger="stop()">Stop sync</button>

	</template>
	import {BindingEngine, bindingMode} from 'aurelia-binding';
	import {inject} from 'aurelia-framework';
	import {Foo} from './foo'
	import {Bar} from './bar'

	@inject(BindingEngine)
	export class App {
	foo = new Foo();
	bar = new Bar();

	constructor(bindingEngine){
	this.bindingEngine = bindingEngine;
	console.log()

	}

	stop( ){
	this.binding.unbind();
	this.binding = undefined;
	}

	start(){
	let expression = this.bindingEngine.createBindingExpression('value', 'value', bindingMode.twoWay);
	this.binding = expression.createBinding(this.bar);
	let scope = {foo: this.foo, bindingContext: this.foo};
	this.binding.bind(scope);
	}
	}
	<!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://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>