Data binding: property of model object changes from integer to string

Question

In my app a model object myModelObject with a property foo is created. Initially foo is set to an integer. foo can be modified in an input form field.

Modifying foo in this form field to be some other integer results in foo changing to be a string.

Example w/o 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 a property stays an integer after being modified via form field?

Note: App.myModelObject.set("foo", 23) results in foo staying an integer.

I use Ember 1.7.0.

is `myModelObject` of the type `DS.Model` or `Ember.Object`? or another type? — MilkyWayJoe, Aug 26 '14 at 18:29
I tried both. `App.MyModelClass = DS.Model.extend({ foo: DS.attr("number", { defaultValue: 7 }) }); App.myModelObject = App.MyModelClass.create();` ...did not work for me. — mostwanted, Aug 26 '14 at 18:35
Hmmm... I don't think you're using the correct API. I may be wrong, but `Model` doesn't have a public `create` method. Try `store.createRecord('myModelClass', { / attributes / });`. Have you checked the [guides](http://emberjs.com/guides/models/creating-and-deleting-records/) about this? Also, can you add your code to JSBin or JSFiddle so we can take a look? — MilkyWayJoe, Aug 26 '14 at 18:56
http://emberjs.com/guides/object-model/classes-and-instances/#toc_creating-instances — mostwanted, Aug 26 '14 at 19:03

Steve H. · Accepted Answer · 2014-08-30T03:12:27.183

4

First of all, the <input type="range"> control's value property is a string. To quote the W3C wiki:

The range state represents a control for setting the element's value to a string representing a number.

I don't believe you will get past that fundamental constraint of the browser.

Secondly, your question is about how to enforce the value to be a Number. You could do it this way:

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 the component:

{{numeric-input type="range" numericValue=myValue min="0" max="100"}}

See the following jsbin: http://jsbin.com/vuhunesovono/1/edit?html,js,output

edited Aug 30 '14 at 03:12

answered Aug 30 '14 at 02:17

Steve H.

6,912
2
30
49

Thank you - looks great! :) `numericValue: 0` is optional, isn't it? It prevents me from setting a default value for `foo` in my `App.MyModelClass`, doesn't it. I removed it and now it seems to work great. Any objections to removing `numericValue: 0`? – mostwanted Aug 30 '14 at 09:29
No, it doesn't prevent setting the value. As you can see in the jsbin, it is initialized with the value 12. Initializing is handled by the `init` method. The initial value in the component is a default if not provided – Steve H. Aug 30 '14 at 23:36
I think i could simplify your jsbin: http://jsbin.com/vuhunesovono/6/edit - i removed the `type` and `numericValue` properties in the NumericInputComponent. What do you think? – mostwanted Aug 31 '14 at 13:09
Sure, that seems to work fine. Like I said, it is just to give some default values in case the user does not supply them. – Steve H. Sep 01 '14 at 02:11

Data binding: property of model object changes from integer to string

1 Answers1

Linked