Geek Answers Handbook

Ember.js input fields

Is it possible to use standard HTML5 input fields in the Ember.js view, or are you forced to use a limited selection of built-in fields such as Ember.TextField, Ember.CheckBox, Ember.TextArea and Ember.select? I cannot figure out how to bind input values ​​to views without using inline views, for example:

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

In particular, I need a number field. Any suggestions?

+4
source share
5 answers

EDIT: Now this is deprecated, you can achieve everything above:

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

Outdated answer

You can just specify a type for TextField

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

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

 App.NumberField = Ember.TextField.extend({ type: 'number', attributeBindings: ['min', 'max', 'step'] }) Input: {{view App.NumberField valueBinding="objectValue" min="1"}}
+21
source

@Bradley Priest answer above, adding type = number really works. However, I found that you need to add some attributes to the Ember.TextField object if you need to enter decimal numbers or specify minimum 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!

+4
source

Here is my well-typed text:

  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 like this:

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

Other systems in which strings are distributed in numeric fields.

+4
source

You can also prevent people from typing any old letters:

 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 it should: I extended nraynaud's answer

+1
source

Here's how I would do it now (currently Ember 1.6-beta5) using components (using ideas from @nraynaud and @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 the template:

 number-field numericValue=someProperty
+1
source

More articles:


All Articles