JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
<script src="http://coderberry.me/assets/ZeroClipboard/ZeroClipboard.js"></script>
<script type="text/x-handlebars">
    {{my-input}}
</script>

<script type="text/x-handlebars" id="components/my-input">
    the value:{{value}}<br/><button {{action "changeTheValue"}}>change value</button>
    <button {{action "displayTheValues"}}>display values</button>
</script>

JavaScript

var App = Ember.Application.create();

App.MyInputComponent = Ember.Component.extend({
    tagName: 'input',
    attributeBindings: ['value'],
    changeTheValue:function(){
        this.set('value',Date.now());
    },
    displayTheValues:function(){
        alert("ember value:\n"+this.get("value")+"\nDOM value:\n"+this.$().val());
    },
    //catches dom event
    //fires only when focused lost
    change:function(event){
        this.set("value",event.target.value);
    },
    //catches dom event
    keyUp:function(event){
        this.set("value",event.target.value);
    },
    //works like this in future versions, does not work in current version
    onChange: Ember.observer('value', function() {
        console.log('change');
    }),
    //alternative observer that works fine in current version
    onChange2: function(){
        console.log('change2');
    }.observes('value')
});