动态验证EmberJS TextField？

Question

我需要验证使用EmberJS绑定到模型属性的表单文本字段.我希望用户只能输入有效的正数.

我知道jQuery.isNumber(),但我不知道如何将它连接到字段.我尝试使用Ember.computed(...)在模型的属性上编写显式的getter/setter函数,但它不起作用.

是否有类似于我可以连接的WinForms onChanging()事件？

Answer 1

有很多方法可以做这种事情.在这里,我们可以使用绑定和观察者来完成此任务.

首先,让我们创建一个始终返回数字的函数.

var onlyNumber = function(input) {
    return input.toString().replace(/[^\d.]/g, "");
};

使用它我们可以做到以下几点

App = Ember.Application.create();

App.person = Ember.Object.create({
    age: 42
});

App.NumberField = Ember.TextField.extend({
    valueBinding: Ember.Binding.from("App.person.age").transform(onlyNumber),

    _cleanValue: function() {
        this.set('value', onlyNumber(this.get('value')));
    }.observes('value')
});

1)我们正在创建一个绑定到Person年龄的绑定,但是通过此绑定的任何内容都只能是一个数字.有关详细信息,请参阅Ember.Binding to/from transforms.

2)我们正在观察文本字段的值,并将其设置为更改时的数字.如果用户输入'42a',我们将立即将其设置回'42'.请注意,即使'42a'在短暂的文本输入中,由于我们的转换,它也无法通过绑定.

这是一个显示这个例子的小提琴:http://jsfiddle.net/nDBgC/