Question

我需要验证使用EmberJS绑定到模型属性的表单文本字段。我希望用户只能输入有效的正数。

我知道jQuery.isNumber（），但我不知道如何将它连接到现场。我尝试使用Ember.computed（...）在模型的属性上编写显式的getter / setter函数，但它没有用。

是否有类似于我可以连接的WinForms onChanging（）事件？

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）我们正在创建一个绑定到Person年龄的绑定，但是通过此绑定的任何内容都只能是一个数字。有关更多详细信息，请参阅转换后的Ember.Binding。

2）我们正在观察文本字段的值，并将其设置为更改时的数字。如果用户输入'42a'，我们将立即将其设置回'42'。请注意，即使'42a'在短暂的文本输入中，由于我们的变换，它也无法通过绑定。

这是一个显示此示例的小提琴：http://jsfiddle.net/nDBgC/

Answer 2

您可以在TextField上添加keyDown事件处理程序，请参阅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）。它是用coffeescript编写的，有点改动以匹配becomeFocus示例（http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/）

生成组件：

ember g component number-field
将蓝图代码（app / components / number-field.coffee）更改为

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

动态验证EmberJS TextField？

4 个答案: