4

是否可以在 Ember.js 视图中使用标准 HTML5 输入字段，或者您是否被迫使用有限的内置字段选择，例如 Ember.TextField、Ember.CheckBox、Ember.TextArea 和 Ember.select？如果不使用内置视图，我似乎无法弄清楚如何将输入值绑定到视图：

Input: {{view Ember.TextField valueBinding="objectValue" }}

具体来说，我需要一个数字字段。有什么建议么？

4

5 回答 5

22

编辑：这现在已经过时了，您可以通过以下方式实现上述所有目标：

{{input value=objectValue type="number" min="2"}}

过时的答案

您只需指定 TextField 的类型

Input: {{view Ember.TextField valueBinding="objectValue" type="number"}}

如果你想访问数字字段的额外属性，你可以子类化Ember.TextField。

App.NumberField = Ember.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step']
})

Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
于 2013-01-22T03:06:06.813 回答
4

@Bradley Priest 上面的回答是正确的，添加 type=number 确实有效。但是，我发现如果您需要输入十进制数字或想要指定最小/最大输入值，则需要向 Ember.TextField 对象添加一些属性。我只是扩展了 Ember.TextField 以向该字段添加一些属性：

//Add a number field
App.NumberField = Ember.TextField.extend({
    attributeBindings: ['name', 'min', 'max', 'step']
});

在模板中：

{{view App.NumberField type="number" valueBinding="view.myValue" min="0.0" max="1.0" step="0.01" }}

et voile！

于 2013-01-22T15:20:02.653 回答
4

这是我对它的正确输入：

    App.NumberField = Ember.TextField.extend({
        type: 'number',
        attributeBindings: ['min', 'max', 'step'],
        numericValue: function (key, v) {
            if (arguments.length === 1)
                return parseFloat(this.get('value'));
            else
                this.set('value', v !== undefined ? v+'' : '');
        }.property('value')
    });

我这样使用它：

{{view App.NumberField type="number" numericValueBinding="prop" min="0.0" max="1.0" step="0.01" }}

将字符串传播到数字类型字段的其他系统。

于 2013-06-23T02:36:33.623 回答
1

这就是我现在（目前是 Ember 1.6-beta5）使用组件（使用来自 @nraynaud 和 @nont 的想法）的方式：

App.NumberFieldComponent = Ember.TextField.extend
  tagName: "input"
  type: "number"

  numericValue: ((key, value) ->
    if arguments.length is 1
      parseFloat @get "value"
    else
      @set "value", (if value isnt undefined then "#{value}" else "")
  ).property "value"

  didInsertElement: ->
    @$().keypress (key) ->
      false  if (key.charCode isnt 46) and (key.charCode isnt 45) and (key.charCode < 48 or key.charCode > 57)

然后，将其包含在模板中：

number-field numericValue=someProperty
于 2014-06-01T08:58:03.777 回答
1

您可能还希望阻止人们在那里输入任何旧字母：

App.NumberField = App.TextField.extend({
  type: 'number',
  attributeBindings: ['min', 'max', 'step'],
  numbericValue : function (key,v) {
    if (arguments.length === 1)
      return parseFloat(this.get('value'));
    else
      this.set('value', v !== undefined ? v+'' : '');
  }.property('value'),
  didInsertElement: function() {
    this.$().keypress(function(key) {
      if((key.charCode!=46)&&(key.charCode!=45)&&(key.charCode < 48 || key.charCode > 57)) return false;
    })  
  }
})

应得的信用：我扩展了nraynaud的答案

于 2013-12-05T20:58:49.610 回答