如何覆盖ember.js中的父属性？ （具体数字输入的行为） [英] How to override a parent property in ember.js? (Specifically number input's behaviour)

问题描述

我想编写一个扩展Ember Input作为数字输入的新组件。当这个类的用户将它们的值绑定到数字输入组件的值属性时，他们应该只得到一个数字（或NaN为无效值）。在Ember Input中，value有一个属性绑定。

I want to write a new component that extends Ember Input as number input. When users of this class binds their values to value property of number-input-component, they should only get a number (or NaN for invalid values). In Ember Input, value has an attribute binding.

我已经在数字输入组件上定义了名为value的计算属性作为以下：

I've defined a computed property named "value" on number-input-component as following:

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可以，但是它应该是双向绑定的。）

It works as expected but it's not working in two-way binding. (Actually it is ok for DDAU. But it should work in two-way bindings.)

注意：
我知道我可以提供其他属性，例如numericValue（如此处显示）），以便用户可以将其值绑定到numericValue 。但是我不想将用户同时使用值和 numericValue 。

更新： / strong>

UPDATE:

在输入字段时，任何打字错误都不应该重置该值。例如，当用户尝试写123456789并且意外地按12345678p时，不应该导致输入复位。当值无效时，不显示错误消息或者不重置价值不是组件的责任。

While typing to the field, any typo shouldn't reset the value. For example while user is trying to write "123456789" and accidentally press "12345678p" should not cause the input reset. Neither displaying an error message nor reseting the value is not a responsibility of the component when value is invalid.

有一个小提琴你可以看到： Ember-Twiddle

There is a fiddle you can see: Ember-Twiddle

推荐答案

另一种方法是覆盖 _elementValueDidChange（）方法。您可以通过 this.readDOMAttr（'value'）获取当前的DOM值，然后进行清理，最后调用 this.set（'value' sanitizedValue）。这就是Ember内部如何更改值属性。

Another way would be to overwrite the _elementValueDidChange() method. You can get the current DOM value by this.readDOMAttr('value'), do your sanitizing and finally call this.set('value', sanitizedValue). This is how Ember internally changes the value property.

这篇关于如何覆盖ember.js中的父属性？ （具体数字输入的行为）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！