ember.js - 观察输入组件的值

Question

我有一个简单的组件，它是 input通过 tagName 的元素.

到目前为止没有问题。现在我想观察输入的值属性。每当输入改变时，我都想解雇一个观察者。

为什么这不起作用？

可以找到一个 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

免责声明:此解决方案适用于 OP 使用的 ember 版本(ember-1.0.0-rc.6.js)，在 future 的版本中，概念保持不变，只是语法有所改变。

(版本 1.13.6 https://emberjs.jsbin.com/xuhavokubi/edit?html,js,output 的示例，代码发布在最后)

原始代码的问题如下，

1.属性绑定(bind)属性为attributeBindings
2.Ember.observer在 future 的版本中工作得很好，但似乎在这个组件中不起作用(ember-1.0.0-rc.6.js)

3.添加了使用observes的替代观察者功能

4.增加处理dom值变化和通知ember属性的功能

示例，

对于版本 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')
});

对于版本 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')
});