Confusion around numeric attributes and input helpers

Ember Data
1

I’m trying a fairly simple case of a list of items with a numeric field (let’s call it “amount”) and how to get them to work properly with input helpers.

Let’s say this is the model:

DS.Model.extend({
  amount: DS.attr('number')
});

And I’m trying to use it like this:

{{#each item in model}}
{{input type="number" value=item.amount}}
{{/each}}

Now when I’m trying to add a display for the sum of the items, for example:

// controller code
...
sum: function() {
    var returned = 0;
    this.get('model').forEach(m => returned += m.get('amount'));
    return returned;
}.property('model.@each.amount')

Loading the page works fine and the sum is correct. However editing one of the input boxes (even simple things like dropping a digit) immediately turns the sum return value to string, and performs concatenation instead of increment. It appears that the binding between the input boxes and the model doesn’t take the type into consideration.

What am I missing here? Is this the expected behavior? If so where is this documented?

Thanks in advance

1 Like
2

I couldnt find a bug report for this so I dont know if this is intended or not (it does seem unintuitive to me) so maybe raise a github issue?

Until you get a firm answer you could do something like this.

sum: function() {
  var returned = 0;
  this.get('model').forEach(function(m) {
    returned += Number(m.get('amount')); // parseInt()/parseFloat() may also be useful
}.property('model.@each.amount')
3

Yes of course the workaround is obvious, but tedious and violates DRY :smile:

In any case I opened a github issue for it: https://github.com/emberjs/ember.js/issues/11209

Thanks!