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?

Bradley Priest · Accepted Answer · 2015-01-09 10:45:41Z

22

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

edited Jan 9, 2015 at 10:45

answered Jan 22, 2013 at 3:06

Bradley Priest

7,4581 gold badge31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Bradley Priest Over a year ago

Welcome to Ember, I hope you enjoy your stay.

reptilicus Over a year ago

Good lord, it works. I'd marry Ember.js if she came with better documentation.

Bradley Priest Over a year ago

I'd love to hear what you can't find in the documentation, personally I think the documentation is pretty good these days, if there's something missing, I'll add it myself

Trek Glowacki Over a year ago

We're always looking to improve out documentation. Although, humorously, this functionality is documented: emberjs.com/api/classes/Ember.TextField.html under the heading "HTML Attributes"

Bradley Priest Over a year ago

@koanima that's becaused value is a computed property inside Ember.TextField, if you're manually setting the value on an input there's no need to use App.NumberField at all just put the <input on the page. More likely you need to give a default value to the context object backing the input than anything else

|

reptilicus · Accepted Answer · 2013-01-22 15:20:02Z

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!

answered Jan 22, 2013 at 15:20

reptilicus

10.4k6 gold badges59 silver badges80 bronze badges

Comments

nraynaud · Accepted Answer · 2013-06-23 02:36:33Z

4

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.

answered Jun 23, 2013 at 2:36

nraynaud

5,1818 gold badges43 silver badges60 bronze badges

Comments

nont · Accepted Answer · 2013-12-05 20:58:49Z

1

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

answered Dec 5, 2013 at 20:58

nont

9,5597 gold badges65 silver badges83 bronze badges

Comments

neverfox · Accepted Answer · 2014-06-01 08:58:03Z

1

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

answered Jun 1, 2014 at 8:58

neverfox

7,1408 gold badges34 silver badges40 bronze badges

Collectives™ on Stack Overflow

Ember.js input fields

5 Answers 5

Outdated answer

12 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Outdated answer

12 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related