Соблюдать значение входного компонента

Question

У меня есть простой компонент, который является элементом input через tagName.

До сих пор никаких проблем. Теперь я хотел бы наблюдать атрибут value ввода. Каждый раз, когда ввод изменяется, я хотел бы запустить наблюдателя.

Почему это не работает?

JSFiddle можно найти 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

ОТКАЗ: Это решение относится к версии уголек, который используется в ОП (уголек-1.0.0-rc.6.js), в будущих версиях концепция остается той же только синтаксис немного меняется.

(пример для версии 1.13.6 https://emberjs.jsbin.com/xuhavokubi/edit?html,js,output, кода размещен в самом конце)

Проблемы с исходным кодом являются следующими,

1. Свойства для связывания атрибута является attributeBindings

Ember.observer 2. прекрасно работает в будущих версиях, но не похоже на работу в компоненте в этом одном (уголек-1.0.0-rc.6.js)

3.Added альтернативная функция наблюдателя с использованием observes

4.Added функции для обработки DOM изменения значения и уведомлять уголек свойству

Примеров,

для версии уголька-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') 
}); 

---

для версии 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') 
});