ember.js - Observe value of input component -

i have simple component input element via tagname.

so far no problem. observe value attribute of input. anytime input changed fire observer.

why not work?

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

disclaimer: solution applies version of ember used op (ember-1.0.0-rc.6.js) , in future versions concept remains same syntax changes bit.

(example version 1.13.6 https://emberjs.jsbin.com/xuhavokubi/edit?html,js,output , code posted @ end)

the issues original code following,

1.the property binding attribute attributebindings

2.the ember.observer works fine in future versions, not seem work within component in 1 (ember-1.0.0-rc.6.js)

3.added alternative observer function using observes

4.added function handle dom value change , 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">     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 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 in future versions, not work in current version     onchange: ember.observer('value', function() {         console.log('change');     }),     //alternative observer 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/>     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 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') });