vitch/jsbin.AViZATE.css

## jsbin.AViZATE.css

input, label {
  display: block
}

## jsbin.AViZATE.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember.js property loop</title>

</head>
<body>
  <script type="text/x-handlebars" data-template-name="home">
  <h1>Entwined properties</h1>
  <p>
    In my app I display the price in both Euros and Pounds and need to allow the
    user to update either figure. Is this the best way to deal with the
    circular dependency?
  </p>
  <label>Euros</label>
  {{input value=euros}}
  <label>Pounds</label>
  {{input value=pounds}}

  </script>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
</body>
</html>

## jsbin.AViZATE.js
window.Blah = Ember.Application.create();

Blah.Router.map(function () {
  this.resource('home', { path: '/' }, function () {
  });
});

Blah.HomeRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    controller.set('pounds', 100);
  }
});

Blah.HomeController = Ember.ObjectController.extend({
  isInternalEuroUpdate: false,
  exchangeRate: 1.2,
  euros: '',
  pounds: function(key, value) {
    if (arguments.length === 2) {
      this.set('isInternalEuroUpdate', true);
      this.set('euros', value * this.get('exchangeRate'));
      this.set('isInternalEuroUpdate', false);
    }
    return value;
  }.property('euros'),
  euroChange: function(value) {
    if (!this.get('isInternalEuroUpdate')) {
      this.set('pounds', this.get('euros') / this.get('exchangeRate'));
    }
  }.observes('euros')
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember.js property loop</title>

	</head>
	<body>
	<script type="text/x-handlebars" data-template-name="home">
	<h1>Entwined properties</h1>
	<p>
	In my app I display the price in both Euros and Pounds and need to allow the
	user to update either figure. Is this the best way to deal with the
	circular dependency?
	</p>
	<label>Euros</label>
	{{input value=euros}}
	<label>Pounds</label>
	{{input value=pounds}}

	</script>

	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
	</body>
	</html>
	window.Blah = Ember.Application.create();

	Blah.Router.map(function () {
	this.resource('home', { path: '/' }, function () {
	});
	});

	Blah.HomeRoute = Ember.Route.extend({
	setupController: function(controller, model) {
	controller.set('pounds', 100);
	}
	});

	Blah.HomeController = Ember.ObjectController.extend({
	isInternalEuroUpdate: false,
	exchangeRate: 1.2,
	euros: '',
	pounds: function(key, value) {
	if (arguments.length === 2) {
	this.set('isInternalEuroUpdate', true);
	this.set('euros', value * this.get('exchangeRate'));
	this.set('isInternalEuroUpdate', false);
	}
	return value;
	}.property('euros'),
	euroChange: function(value) {
	if (!this.get('isInternalEuroUpdate')) {
	this.set('pounds', this.get('euros') / this.get('exchangeRate'));
	}
	}.observes('euros')
	});