8

EmberJS を使用して、モデルのプロパティにバインドされたフォーム テキスト フィールドを検証する必要があります。ユーザーが有効な正の数値のみを入力できるようにしたい。

jQuery.isNumber() は知っていますが、それをフィールドに配線する方法がわかりません。Ember.computed(...) を使用して、モデルのプロパティに明示的な getter/setter 関数を記述しようとしましたが、うまくいきませんでした。

接続できる WinForms onChanging() イベントに似たものはありますか?

4

4 に答える 4

14

この種のことを行うには、いくつかの方法があります。ここでは、バインディングとオブザーバーを使用してこれを実現できます。

まず、常に数値を返す関数を作成しましょう。

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 の age への Binding を作成していますが、このバインディングを通過するものはすべて数値のみです。詳細については、変換との間のEmber.Bindingを参照してください。

2) テキスト フィールドの値を監視し、変更されたときに数値のみになるように設定します。ユーザーが「42a」と入力すると、すぐに「42」に戻されます。'42a' がテキスト入力に一瞬含まれていたとしても、変換のためにバインディングを通過できなかったことに注意してください。

この例を示すフィドルは次のとおりです: http://jsfiddle.net/nDBgC/

于 2012-05-22T04:39:17.860 に答える
3

keyDownTextField にイベント ハンドラーを追加できます。 http://jsfiddle.net/pangratz666/SKJfF/を参照してください。

App.NumberTextField = Ember.TextField.extend({
    // implementation of this function, see http://stackoverflow.com/a/995193/65542
    keyDown: function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    }
});​
于 2012-05-21T13:11:56.177 に答える