Input Ember.js输入字段

是否可以在Ember.js视图中使用标准的HTML5输入字段，或者强制使用有限的内置字段选择，如Ember.TextField、Ember.CheckBox、Ember.TextArea和Ember.select？我似乎不知道如何将输入值绑定到视图，而不使用内置视图，如：

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

---

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

编辑：这已过时。您可以通过以下方法实现上述所有功能：

{{input value=objectValue type=“number”min=“2”}}

---

过时的答案 您可以只指定文本字段的类型

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"}}

---

@布拉德利·普雷斯特（Bradley Prist）上述回答是正确的，添加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" }}

---

等等

以下是我对它的精练理解：

    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" }}

---

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

您可能还希望防止人们在其中键入任何旧字母：

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;
    })  
  }
})

App.NumberField=App.TextField.extend({
键入：“编号”，
属性索引：[“最小”、“最大”、“步长”]，
numbericValue:函数（键，v）{
if（arguments.length==1）
返回parseFloat（this.get（'value'）；
其他的
此.set（'value'，v！==未定义？v+''：）；
}.property（“value”），
didInsertElement:函数（）{
此。$（）按键（功能（键）{
如果（（key.charCode！=46）&&（key.charCode！=45）&&（key.charCode<48 | | key.charCode>57））返回false；
})  
}
})

---

值得称赞的地方：我扩展了nraynaud的答案

这就是我现在如何使用组件（使用@nraynaud和@nont的思想）来实现这一点（目前为Ember 1.6-beta5）：

---

欢迎来到恩伯，我希望你们在这里过得愉快。天哪，这很有效。如果她有更好的文档，我会嫁给Ember.js。我很想听听你在文档中找不到的东西，我个人认为这些天的文档非常好，如果缺少什么，我会自己补充。我们一直在寻求改进文档。虽然，有趣的是，这个功能被记录了下来：在标题“HTML Attributes”@koanima下，这是因为值是Ember.TextField中的一个计算属性，如果您手动设置输入值，根本不需要使用App.NumberField，只需将

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