Data binding: property of model object changes from integer to string
My application creates a model object myModelObject
with a property foo
. Initially foo
set to an integer. foo
can be changed in the input form field.
Modify foo
this form field to be some other integer results in foo
, changing as a string.
- Example without Ember data: http://jsbin.com/qahafapixebe/3/edit
- Example with Ember data: http://jsbin.com/nujesovugudo/2/edit
Is there a way to ensure that the property remains intact after being modified via a form field?
Note: App.myModelObject.set("foo", 23)
results in what foo
remains an integer.
I am using Ember 1.7.0.
source to share
First of all, the <input type="range">
control property value
is a string. To quote the W3C wiki :
Range state is a control for setting the value of an item to a string representing a number.
I do not believe that you will overcome this basic browser limitation.
Second, your question is how to ensure that the value is Number
. You can do it like this:
App.NumericInputComponent = Ember.TextField.extend({
init: function() {
this.set('value', this.get('numericValue'));
this._super();
},
numericValue: 0,
updateNumeric: function() {
this.set('numericValue', Number(this.get('value')));
}.observes('value'),
updateValue: function() {
var val= Number(this.get('numericValue'));
this.set('value', Number.isNaN(val)?null:val);
}.observes('numericValue')
});
In your template, use a component:
{{numeric-input type="range" numericValue=myValue min="0" max="100"}}
See the following jsbin: http://jsbin.com/vuhunesovono/1/edit?html,js,output
source to share