javascript - 即时验证 EmberJS TextField？

Question

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

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

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

Answer 1

有很多方法可以做到这一点。在这里，我们可以使用绑定(bind)和观察者来完成此操作。

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

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 的年龄创建一个 Binding，但是通过这个 binding 的任何东西都只能是一个数字。参见 Ember.Binding到/从转换了解更多详情。

2) 我们正在观察文本字段的值，并在它发生变化时将其设置为仅为一个数字。如果用户输入“42a”，我们将立即将其设置回“42”。请注意，即使“42a”在文本输入中出现了一秒钟，但由于我们的转换，它无法通过绑定(bind)。

这是一个展示这个例子的 fiddle :http://jsfiddle.net/nDBgC/