Observe value of input component

Question

I have a simple component that is a input element via the tagName.

So far no problem. Now I would like to observe the value attribute of the input. Anytime the input is changed I would like to fire an observer.

Why does this not work?

A JSFiddle can be found here.

<script type="text/x-handlebars">
    {{my-input}}
</script>

<script type="text/x-handlebars" id="components/my-input">
</script>

var App = Ember.Application.create();

App.MyInputComponent = Ember.Component.extend({
    tagName: 'input',
    attributeBinding: ['value'],
    onChange: Ember.observer('value', function() {
        console.log('change');
    })
});

Answer 1

DISCLAIMER: This solution applies to the version of ember that is used by the OP (ember-1.0.0-rc.6.js) , in future versions the concept remains the same only the syntax changes a bit.

(Example for version 1.13.6 https://emberjs.jsbin.com/xuhavokubi/edit?html,js,output , code posted at the very end)

The issues with the original code are the following,

1.The property for binding the attribute is attributeBindings

2.The Ember.observer works just fine in future versions, but does not seem to work within the component in this one (ember-1.0.0-rc.6.js)

3.Added alternative observer function using observes

4.Added function to handle dom value change and notify ember property

Examples,

for version ember-1.0.0-rc.6.js (http://jsfiddle.net/3vre965u/)

hbs

<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>

js

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')
});

---

for version 1.13.6 (https://emberjs.jsbin.com/xuhavokubi/edit?html,js,output )

hbs

<script type="text/x-handlebars">
    {{my-input viewName="test"}}
    <br/>
    the value:{{view.test.value}}<br/><button {{action "changeTheValue" target="view.test"}}>change value</button>
    <button {{action "displayTheValues" target="view.test"}}>display values</button>
</script>

<script type="text/x-handlebars" id="components/my-input">
</script>

js

var App = Ember.Application.create();

App.MyInputComponent = Ember.Component.extend({
    tagName: 'input',
    attributeBindings: ['value'],
  actions:{
   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);
    },
    onChange: Ember.observer('value', function() {
        console.log('change');
    }),
    //alternative observer
    onChange2: function(){
        console.log('change2');
    }.observes('value')
});