Display multiples sums in an table with emberjs/handlebars - ember.js

Question

I'm working on a personnal project based on ember and I'm a bit stuck with something I'd like to implement :
I need to be able to display a table (based on the model of an ArrayController) and inside this table I need to display a column summing all values from another column for all the previous rows.
I know how to sum all rows into only one value, but I don't know how to do that for every rows.
Here is what I need to achieve :
__________________________
value | sum
__________________________
1 | 1
__________________________
2 | 3
__________________________
-1 | 2
and so on...
"value" is a field for each DS.Model in the model of my ArrayController.
I'm not looking for the final implementation but some hints on how to achieve this.
Thanks for reading me,
Pierre.

Answer 1

How about something like this:
(javascript)
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexController = Ember.Controller.extend({
actions: {
inc: function () {
this.get("model")[1].incrementProperty("val");
}
}
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var a = App.Model.create({
val: 1
});
var b = App.Model.create({
val: 2,
prev: a
});
var c = App.Model.create({
val: -1,
prev: b
});
return [a, b, c];
}
});
App.Model = Ember.Object.extend({
val: 0,
prev: null,
sum: function () {
var val = this.get("val"),
prev = this.get("prev");
if (!prev) {
return val;
}
return prev.get("sum") + val;
}.property("val", "prev.sum")
});
(template)
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.val}} | {{item.sum}}</li>
{{/each}}
</ul>
<button type="button" {{action inc}}>Inc</button>
</script>
Working example here
The only caveat, you have to create and maintain the links between the elements. If you reshuffle the array, add new elements etc... you have to recreate all the references manually.
Update:
I'm intrigued by this problem, so I gave it another go.
App.IndexRoute = Ember.Route.extend({
model: function() {
var col = [];
col.push(App.Model.create({
val: 1,
all: col
}));
col.push(App.Model.create({
val: 2,
all: col
}));
col.push(App.Model.create({
val: -1,
all: col
}));
return col;
}
});
App.Model = Ember.Object.extend({
val: 0,
all: null,
prev: function () {
var all = this.get("all");
for (var i = 0; i < all.length - 1; i++) {
if (all[i + 1] === this) {
return all[i];
}
}
return null;
}.property("all.[]"),
sum: function () {
var val = this.get("val"),
prev = this.get("prev");
if (!prev) {
return val;
}
return prev.get("sum") + val;
}.property("val", "prev.sum")
});
Updated live demo is here.
This will track changes in parent collection and automatically determine the previous element.