如何覆盖ember.js中的父属性？（特别是数字输入和行为）

我想编写一个新组件，将余烬输入扩展为数字输入。当此类的用户将其值绑定到数字输入组件的

value

属性时，他们应该只获取一个数字（或NaN表示无效值）。在余烬输入中，值具有属性绑定

我在数字输入组件上定义了一个名为“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”时，不应导致输入复位。当值无效时，显示错误消息或重置值都不是组件的责任

---

您可以看到一个小提琴：

您可以编写

值的观察者，当它被更改时，用经过消毒的版本替换它：

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

当观察者修改其监视的属性时，Ember将阻止竞争条件。
另一种方法是覆盖
\u element valuedidchange（）
方法。您可以通过
this.readDOMAttr（'value'）
获取当前DOM值，执行清理，最后调用
this.set（'value'，sanitizedValue）
。这就是Ember如何在内部更改
值
属性。
我找到了一个使用@jcbvm解决方案中建议的
\u 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
component为Chrome、Firefox和Edge（非IE）上的无效值返回空字符串。有关清理的参考

此解决方案的缺点：


覆盖
\u elementDidChange
修改属性索引。（可能父类取决于此值。）
但它在字段中键入时闪烁。我会更新我的问题。是的，这样做可以完全解决问题。但我对这一点没有信心，因为下划线。它是私有的还是不可靠的功能？它是私有的是的，但因为我们正在覆盖输入组件的默认行为，我不认为这是一件坏事。我在我的应用程序中使用了类似的东西，从来没有遇到过任何问题。