#each not updating computed sum value - ember.js

Question

In a route with an array model, I need a couple of summary statistics available. These summary statistics need to be updated based on values typed into numeric input fields. I have attempted to implement this by setting these as computed properties using #each in a controller.
The properties (creditTotal and costTotal) compute on load, but fail to update when values are updated through the input fields. Unfortunately, they need to be updating, and I am at a loss how to make this happen.
Admittedly I am not a full time developer, so I am grateful for any assistance and insight you may be able to offer.
0640PST 03Jan2018: I also put this in a GitHub repo (https://github.com/knu2xs/arcgis-credit-calculator) to hopefully make it a little easier for anybody generous enough with their time to take a closer look at it.
Here are the relevant files, starting with the controller.
// ./app/controllers/index.js
import Controller from '#ember/controller';
import { computed } from '#ember/object';
export default Controller.extend({
creditTotal: computed.sum('model.#each.creditCost', function(){
return this.get('model').mapBy('creditCost');
}),
costTotal: computed.sum('model.#each.cost', function(){
return this.get('model').mapBy('cost');
})
});
Next, the model being referenced.
// ./app/models/credit-object.js
import DS from 'ember-data';
import { computed } from '#ember/object';
const _creditCost = 0.1;
export default DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
creditRate: DS.attr('number'),
unitRate: DS.attr('number'),
units: DS.attr('number', { defaultValue: 0 }),
rate: computed('creditRate', 'unitRate', function(){
return Number(this.get('creditRate')) / Number(this.get('unitRate'));
}),
creditCost: computed('rate', 'units', function(){
return this.get('rate') * this.get('units');
}),
cost: computed('creditCost', function(){
return this.get('creditCost') * _creditCost;
}),
});
And the route.
// ./app/routes/index.js
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.get('store').findAll('credit-object');
}
});
Finally, the template, so it hopefully makes some sense.
<table class="table table-striped table-sm">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Credit Rate</th>
<th scope="col">Unit Count</th>
<th scope="col">Credit Count</th>
<th scope="col">Cost</th>
</tr>
</thead>
<tbody>
{{#each model as |creditObject|}}
<tr>
<td>{{creditObject.name}}</td>
<td>{{creditObject.rate}}</td>
<td>{{input type='number' value=creditObject.units}}</td>
<td>{{format-floating-point creditObject.creditCost}}</td>
<td>{{format-currency creditObject.cost}}</td>
</tr>
{{/each}}
<tr class="table-primary">
<td>Total</td>
<td></td>
<td></td>
<td>{{format-floating-point creditTotal}}</td>
<td>{{format-currency costTotal}}</td>
</tr>
</tbody>
</table>

Answer 1

I eventually figured out the solution through a lot of trial and error. While not exactly the most elegant, this is what eventually worked with Ember.js version 2.18.
creditArray: computed('model.#each.creditCost', function(){
return this.get('model').mapBy('creditCost');
}),
creditTotal: computed.sum('creditArray')
I did stumble across an enhancement request discussing chaining of these types of functions so it could become something like this.
this.get('model').mapBy('creditCost').sum()
Currently this does not work, but I definitely hope it will in the future!

Answer 2

creditArray: computed('model.#each.creditCost', function(){
return this.get('model').mapBy('creditCost');
}),
creditTotal: computed.sum('creditArray')
I did stumble across an enhancement request discussing chaining of
these types of functions so it could become something like this.
this.get('model').mapBy('creditCost').sum()
Currently this does not work, but I definitely hope it will in the
future!
You have to differentiate between computed property macros (e.g. computed.sum) and native javascript array functions (e.g. mapBy).
The above is not possible because there is no sum function available in javascript, but it can be easily implemented with reduce.
this.get('model').mapBy('creditCost').reduce((res, val) => res + val)

Answer 3

Try this:
// ./app/controllers/index.js
import Controller from '#ember/controller';
import { computed } from '#ember/object';
export default Controller.extend({
creditTotal: computed.sum('model.#each.{units}', function(){
return this.get('model').mapBy('creditCost');
}),
costTotal: computed.sum('model.#each.{units}', function(){
return this.get('model').mapBy('cost');
})
});
With the '{' it should work just fine