2-way-binding

Vanilla.js two-way binding

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script type="text/x-handlebars">
	<label> {{input type="number" value=celsius}}°C </label>
	⇄
	<label> {{input type="number" value=fahrenheit}}°F </label>
</script>

CSS

body, input {font-size: 18px;}
input {width: 4em}

JavaScript

App = Ember.Application.create();

function c2f(c) {
	return 9/5 * c + 32;
}
function f2c(f) {
	return 5/9 * (f - 32);
}

App.ApplicationController = Ember.Controller.extend({
    celsius: 0,
    fahrenheit: function (key, value) {
        if (arguments.length > 1) {
            this.set("celsius", f2c(value));
        }
        return c2f(this.get("celsius"));
    }.property("celsius")
});