dawnerd/fidelway.js

## fidelway.js
var NumberInput = Fidel.ViewController.extend({
  init: function() {
    this.el.bind('keyup', this.proxy(this.changeValue));
  },
  changeValue: function() {
    var value = ~~(this.el.val());
    this.el.val(value);
    this.trigger('valueChanged', [value]);
  }
});

var NumberOutput = Fidel.ViewController.extend({
  init: function() {
    var self = this;
    this.value = 0;
    this.on('update', this.proxy(this.update));
    this.modifier.bind('keyup', function() {
      self.update();
    });
  },
  update: function(value) {
    this.value = value || this.value;
    switch(this.type) {
      case 'multiply':
        this.output.val(this.value * this.modifier.val());
        break;
      case 'divide':
        this.output.val(this.value / this.modifier.val());
        break;
      case 'square':
        this.output.val(Math.pow(this.value,2));
        break;
    }
  }
});

var CalculatorController = Fidel.ViewController.extend({
  equations: [
    'multiply',
    'divide',
    'square'
  ],
  ops: [],
  init: function() {
    var self = this;
    this.input = new NumberInput({el: self.inputValue});

    for(var i = 0, c = this.equations.length; i < c; i++) {
      this.ops.push(new NumberOutput({el: self.el.find('.'+self.equations[i]), type: self.equations[i]}));
    }

    this.input.on('valueChanged', function(value) {
      for(var i = self.ops.length; i--;) {
        self.ops[i].trigger('update', [value]);
      }
    });
  }
});

## main.html
<html>
<head>
  <title>Code Football</title>
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="fidel.js"></script>
  <style>
  body { font-size: 30px; font-family: sans-serif; }
  .input { float: left; }
  .results { width: 170px; float: left; text-align: right; }
  input { width: 50px; font-size: 30px; font-weight: bold; color: #333; border: 1px solid #ccc; padding: 5px 10px; text-align: center; }
  </style>
</head>
<body>

<calculator>
  <div class="input">
    <input type="text" data-element="inputValue" placeholder="0">
  </div>
  <div class="results">
    <div class="multiply">x <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
    <div class="divide">/ <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
    <div class="square"><input type="hidden" placeholder="0" data-element="modifier"><sup>2</sup> = <input type="text" placeholder="0" disabled data-element="result"></div>
  </div>
</calculator>

<!--<script src="noobway.js"></script>-->
<script src="fidelway.js"></script>
<script>
var calculator = new CalculatorController({el: $('calculator')});
</script>

</body>
</html>

## noobway.js
$('input[data-element="inputValue"], input[data-element="modifier"]').bind('keyup change', function() {
  var modifier = ~~($('input[data-element="inputValue"]').val());
  $('.multiply input[data-element="result"]').val(modifier * ($('.multiply input[data-element="modifier"]').val()));
  $('.divide input[data-element="result"]').val(modifier / ($('.divide input[data-element="modifier"]').val()));
  $('.square input[data-element="result"]').val(Math.pow(modifier,2));
});
	var NumberInput = Fidel.ViewController.extend({
	init: function() {
	this.el.bind('keyup', this.proxy(this.changeValue));
	},
	changeValue: function() {
	var value = ~~(this.el.val());
	this.el.val(value);
	this.trigger('valueChanged', [value]);
	}
	});

	var NumberOutput = Fidel.ViewController.extend({
	init: function() {
	var self = this;
	this.value = 0;
	this.on('update', this.proxy(this.update));
	this.modifier.bind('keyup', function() {
	self.update();
	});
	},
	update: function(value) {
	this.value = value \|\| this.value;
	switch(this.type) {
	case 'multiply':
	this.output.val(this.value * this.modifier.val());
	break;
	case 'divide':
	this.output.val(this.value / this.modifier.val());
	break;
	case 'square':
	this.output.val(Math.pow(this.value,2));
	break;
	}
	}
	});

	var CalculatorController = Fidel.ViewController.extend({
	equations: [
	'multiply',
	'divide',
	'square'
	],
	ops: [],
	init: function() {
	var self = this;
	this.input = new NumberInput({el: self.inputValue});

	for(var i = 0, c = this.equations.length; i < c; i++) {
	this.ops.push(new NumberOutput({el: self.el.find('.'+self.equations[i]), type: self.equations[i]}));
	}

	this.input.on('valueChanged', function(value) {
	for(var i = self.ops.length; i--;) {
	self.ops[i].trigger('update', [value]);
	}
	});
	}
	});
	<html>
	<head>
	<title>Code Football</title>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="fidel.js"></script>
	<style>
	body { font-size: 30px; font-family: sans-serif; }
	.input { float: left; }
	.results { width: 170px; float: left; text-align: right; }
	input { width: 50px; font-size: 30px; font-weight: bold; color: #333; border: 1px solid #ccc; padding: 5px 10px; text-align: center; }
	</style>
	</head>
	<body>

	<calculator>
	<div class="input">
	<input type="text" data-element="inputValue" placeholder="0">
	</div>
	<div class="results">
	<div class="multiply">x <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
	<div class="divide">/ <input type="text" placeholder="0" data-element="modifier"> = <input type="text" placeholder="0" disabled data-element="result"></div>
	<div class="square"><input type="hidden" placeholder="0" data-element="modifier"><sup>2</sup> = <input type="text" placeholder="0" disabled data-element="result"></div>
	</div>
	</calculator>

	<!--<script src="noobway.js"></script>-->
	<script src="fidelway.js"></script>
	<script>
	var calculator = new CalculatorController({el: $('calculator')});
	</script>

	</body>
	</html>
	$('input[data-element="inputValue"], input[data-element="modifier"]').bind('keyup change', function() {
	var modifier = ~~($('input[data-element="inputValue"]').val());
	$('.multiply input[data-element="result"]').val(modifier * ($('.multiply input[data-element="modifier"]').val()));
	$('.divide input[data-element="result"]').val(modifier / ($('.divide input[data-element="modifier"]').val()));
	$('.square input[data-element="result"]').val(Math.pow(modifier,2));
	});