1

Ember Input を数値入力として拡張する新しいコンポーネントを作成したいと考えています。このクラスのユーザーが自分の値をnumber-input-component のvalueプロパティにバインドする場合、数値 (または無効な値の場合は NaN) のみを取得する必要があります。Ember Input では、value に属性バインディングがあります。

次のように、 number-input-componentで「value」という名前の計算されたプロパティを定義しました。

value:Ember.computed({
    get:function(key){
       let htmlValue = this.get('htmlvalue');
       return this.sanitize(htmlValue);
    },
    set:function (key, htmlvalue){
       this.set('htmlvalue', htmlvalue);

       if(this.get('onUpdate')) {
          this.get('onUpdate')(this.sanitize(htmlvalue));
       }
       return this.sanitize(htmlvalue);
    }
}),

期待どおりに機能しますが、双方向バインディングでは機能しません。(実際には DDAU では問題ありません。ただし、双方向バインディングでは機能するはずです。)

注:ユーザーが自分の値を「numericValue」にバインドできるように、「numericValue」(ここに表示) などの別のプロパティを提供できることはわかっています。しかし、ユーザーをvalueとnumericValueの両方で混同したくありません。

アップデート：

フィールドへの入力中は、タイプミスによって値がリセットされません。たとえば、ユーザーが「123456789」を書き込もうとして誤って「12345678p」を押しても、入力がリセットされることはありません。値が無効な場合、エラー メッセージを表示したり、値をリセットしたりすることは、コンポーネントの責任ではありません。

あなたが見ることができるフィドルがあります：Ember-Twiddle

4

3 に答える 3

1

別の方法は、メソッドを上書きする_elementValueDidChange()ことです。によって現在の DOM 値を取得this.readDOMAttr('value')し、サニタイズを行い、最後に を呼び出すことができますthis.set('value', sanitizedValue)。これは、Ember がvalueプロパティを内部的に変更する方法です。

于 2016-04-30T13:19:22.350 に答える
0

プロパティのオブザーバーを記述し、value変更されたときにサニタイズされたバージョンに置き換えることができます。

valueWatcher() {
    this.set('value' this.sanitize(this.get('value')));
}.observes('value')

Ember は、オブザーバーが監視しているプロパティを変更するときに競合状態を防ぎます。

于 2016-04-29T14:55:08.277 に答える