ember.jsの親プロパティを上書きする方法は？ （具体的には数字入力の振る舞い）

Question

Ember Inputを数字入力として拡張する新しいコンポーネントを書きたいと思っています。このクラスのユーザーがvalueプロパティの値をnumber-input-componentにバインドする場合は、数値（無効な値の場合はNaN）のみを取得する必要があります。 Ember Inputでは、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のためokです。しかし、それは、双方向バインディングで動作するはずです。。）

注： 私は、ユーザーができるように、私は、このような「numericValue」（hereとして示されている）として別のプロパティを供給できることを知っていますそれらの値を "numericValue"にバインドします。しかし、私は値とnumericValueの両方でユーザーを混乱させたくありません。

UPDATE：

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

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

Answer 1

あなたはvalue財産のオブザーバーを書いて、それが変更された場合、消毒バージョンでそれを置き換えることができます。

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

エンバーは防ぐことができます観察者が監視する財産を変更したときの競争状態。

Answer 2

もう1つの方法は、_elementValueDidChange()メソッドを上書きすることです。現在のDOM値をthis.readDOMAttr('value')で取得し、墨塗りを行い、最後にthis.set('value', sanitizedValue)を呼び出します。 Emberが内部でvalueのプロパティを変更する方法です。

Answer 3

@ jcbvmの解決策で提案されている_elementDidChangeを使用して解決策が見つかりました。また、attributeBindingsをオーバーライドして画面値を管理します。

ここにある：

import Ember from 'ember'; 

export default Ember.TextField.extend({ 
    type:'text',//hey! this is text! 

    init(){ 
    this._super(...arguments); 
    let arr = this.get('attributeBindings'); 
    arr.removeObject('value'); 
    arr.pushObject('val:value'); 
    }, 

    val: Ember.computed('domValue', 'value', function() { 
    let value = this.get('value'); 
    //detect whether the update is trigger by dom or by users of this class: 
    if(!Number.isNaN(value) && this.sanitize(this.get('domValue')) !== value){ 
     return value; 
    } 
    return this.get('domValue'); 
    }), 

    _elementValueDidChange(){ 
    let domValue = this.readDOMAttr('value'); 
    let value = this.sanitize(domValue); 
    if(this.sanitize(this.get('domValue')) !== value){ 
     this.set('domValue', domValue);  
    } 
    this.set('value', value); 
    }, 


    sanitize:function(value){ 
    if(value === ''){ 
     return Number.NaN; 
    } 
    return Number(value); 
    } 
}); 

type=textを使用する理由はHTML5番号入力サニタイズアルゴリズムです。 input type=numberコンポーネントは、Chrome、Firefox、およびEdge（IEではなく）で無効な値の空の文字列を返します。サニタイズの参照from W3C。このソリューションの

短所：

• オーバーライド_elementDidChange
• はattributeBindingsを変更します。 （おそらく、親クラスはこの値に依存します。）