CODEWITHSUNDEEP
inputember.js
reptilicus
reptilicus

Reputation: 10397

Ember.js input fields

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?

Upvotes: 4

Views: 11665

Answers (5)

Bradley Priest
Bradley Priest

Reputation: 7458

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

Upvotes: 22

neverfox
neverfox

Reputation: 7010

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

Upvotes: 1

nont
nont

Reputation: 9519

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

Upvotes: 1

nraynaud
nraynaud

Reputation: 5122

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.

Upvotes: 4

reptilicus
reptilicus

Reputation: 10397

@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!

Upvotes: 4

Related Questions