EmberJS TextFieldをオンザフライで検証しますか？

Question

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

私はjQuery.isNumber（）について知っていますが、フィールドにワイヤリングする方法はわかりません。 Ember.computed（...）を使ってモデルのプロパティに明示的なgetter/setter関数を書き込もうとしましたが、動作しませんでした。

WinForms onChanging（）イベントに似たものがありますか？あなたはあなたのTextFieldのkeyDownイベントハンドラを追加することができます

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）私たちは、人の年齢にバインド作成して行うことができます使用して、この結合を通過するものはわずか数とすることができます。詳細については、Ember.Bindingの変換から変換を参照してください。

2）テキストフィールドの値を観察していて、数値が変更されたときに値を設定しています。ユーザーが '42a'と入力すると、直ちに '42'に戻ります。たとえ "42a"が短時間のテキスト入力にあったとしても、変換のためにバインディングを通過することはできませんでした。ここ

は、この例を示すフィドルある：http://jsfiddle.net/nDBgC/

Answer 2

、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(); 
      } 
     } 
    } 
});​ 

Answer 3

コード（数値のみ入力を処理し、必要に応じて、数ではなく、文字列の結合を可能にする）：

App.NumberFieldComponent = Ember.TextField.extend({ 
    tagName: "input", 
    type: "number", 

    numericValue: function(key, value) { 
    if (arguments.length === 1) { 
     return parseFloat(this.get("value")); 
    } else { 
     return this.set("value", (value !== void 0 ? "" + value : "")); 
    } 
    }.property("value"), 

    didInsertElement: function() { 
    return this.$().keypress(function(key) { 
     if ((key.charCode !== 46) && (key.charCode !== 45) && (key.charCode < 48 || key.charCode > 57)) { 
     return false; 
     } 
    }); 
    } 
}); 

テンプレート：

{{number-field numericValue=someNumericProperty}} 

Answer 4

最新のEmberバージョン（Ember-cli 2.0）の最新の回答です（@neverfoxから）。

燃えさしのG成分数フィールド

変更青写真コード（アプリケーション：これは、コンポーネントを生成（http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/）

1. のCoffeeScriptで書かれ、そしてbecomeFocus例と一致するビットに変更されます/components/number-field.coffee）

`import Ember from 'ember'` 
 
    
 
    NumberFieldComponent = Ember.Component.extend 
 
     tagName: "input" 
 
     type: "number" 
 
    
 
    \t numericValue: ((key, value) -> 
 
    \t \t if arguments.length == 1 
 
    \t \t \t parseFloat(this.get('value')) 
 
    \t \t else 
 
    \t \t \t return this.set("value", (value? ? "" + value : "")) 
 
    \t).property('value') 
 
    
 
    \t assignFilter: (-> 
 
    \t \t this.$().keypress (key) -> 
 
    \t \t \t if ((key.charCode != 46) && (key.charCode != 45) && (key.charCode < 48 || key.charCode > 57)) 
 
    \t \t \t \t false 
 
    \t).on('didInsertElement') 
 
      \t \t 
 
    
 
    `export default NumberFieldComponent`

へ