Ember.js input fields

Question

Is it possible to use standard HTML5 input fields in an Ember.js view, or are you forced to use the limited selection of built in fields like Ember.TextField, Ember.CheckBox, Ember.TextArea, and Ember.select? I can't seem to figure out how to bind the input values to the views without using the built in views like:

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

Specifically, I'm in need of a numeric field. Any suggestions?

Answer 1

EDIT: This is now out of date you can achieve everything above with the following:

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

---

Outdated answer

You can just specify the type for a TextField

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

If you want to access the extra attributes of a number field, you can just subclass Ember.TextField.

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

Input: {{view App.NumberField valueBinding="objectValue" min="1"}}

Answer 2

You may also wish to prevent people from typing any old letters in there:

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

Credit where its due: I extended nraynaud's answer

Answer 3

Here is my well typed take on it :

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

I use it that way:

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

The other systems where propagating strings into number typed fields.

Answer 4

@Bradley Priest's answer above is correct, adding type=number does work. I found out however that you need to add some attributes to the Ember.TextField object if you need decimal numbers input or want to specify min/max input values. I just extended Ember.TextField to add some attributes to the field:

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

In the template:

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

et voile!

Answer 5

This is how I would do this now (currently Ember 1.6-beta5) using components (using the ideas from @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)

Then, to include it in a template:

number-field numericValue=someProperty