atsu85/Validator.js

## app.html
<template>

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

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

  <hr/>
  <p>validator.violatedConstraints 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 {Validator} from './Validator'
import {Bar} from './bar'

@inject(BindingEngine)
export class App {
  validator = new Validator();
  bar = new Bar();

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

  }

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

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

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

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

## Validator.js
export class Validator{
  constructor(){
    this.violatedConstraints = 10;
  }
}
	<template>

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

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

	<hr/>
	<p>validator.violatedConstraints 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 {Validator} from './Validator'
	import {Bar} from './bar'

	@inject(BindingEngine)
	export class App {
	validator = new Validator();
	bar = new Bar();

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

	}

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

	start(){
	let expression = this.bindingEngine.createBindingExpression('value', 'violatedConstraints', bindingMode.twoWay);
	this.binding = expression.createBinding(this.bar);
	// let scope = {validator: this.validator, bindingContext: this.validator};
	let scope = {bindingContext: this.validator};
	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>
	export class Validator{
	constructor(){
	this.violatedConstraints = 10;
	}
	}