gistfile1.js

require(
	[
		'order!Library/jquery-1.6.4.min.js',
		'order!Library/sproutcore-2.0.beta.3.js'
	],
	function() {
		jQuery('document').ready(function() {
			require(
				[],
				function() {
					SC.$(document).ready(function() {
						var testClass = SC.View.extend({
							template: SC.Handlebars.compile(
								[
									'x:{{view SC.TextField valueBinding="_x" changeBinding="ratioChanged" }}',
									'y:{{view SC.TextField valueBinding="_y" changeBinding="ratioChanged" }}',
									'r:{{view SC.TextField valueBinding="computedImageRatio" }}',
									'h:{{view SC.TextField valueBinding="computedImageHeight" changeBinding="sizeChanged" }}',
									'w:{{view SC.TextField valueBinding="computedImageWidth" changeBinding="sizeChanged" }}'
								].join('')
							),

								// Image proportions. Can change if cropping selection changes
							_x: 200,
							_y: 100,

								// Actual configured image size, linked based on the ration between _x and _y.
								// If _w changes, _y has to be recalculated and the other way around
							_w: null,
							_h: null,
							_imageRatio: null,

							ratioChanged: function() {
								console.log('ratio');
							},

							sizeChanged: function() {
								console.log('size');
							},

							computedImageHeight: function() {
								return this.get('computedImageRatio') * this.get('_x');
							}.property('_x'),

							computedImageWidth: function() {
								return this.get('_y') * this.get('computedImageRatio');
							}.property('_y'),

							computedImageRatio: function() {
								return 1 / (this.get('_x') / this.get('_y'));
							}.property('_imageRatio')

						});

						var element = testClass.create();
						element.appendTo($('#content'));
					});
				}
			);
		});
	}
);

_croppedWidth: 42,
_croppedHeight: 42,

_aspectRatio: function() {
return this.get('_croppedWidth') / this.get('_croppedHeight');
}.property('_croppedWidth', '_croppedHeight').cacheable()

_desiredWidth: 800,

_desiredHeight: function(value, key) {
if (value) {
// SET
this.set('_desiredWidth', value * this.get('_aspectRatio'));
} else {
// GET
return this.get('_desiredWidth') / this.get('_aspectRatio');
}
}.property('_desiredWidth', '_aspectRatio').cacheable()