Correct:Bind to computed array proxy computed properties

Correct MVC

by ud3323

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars">
    <h1> Total Weight: {{App.thingsController.totalWeight}}</h1>
    
    {{#each App.thingsController tagName="ul"}}
        {{#view App.ThingView contentBinding="this"}}
            {{weight}} - {{percentWeight}} % 
            {{#view deleteButton}}Delete{{/view}}
        {{/view}}
    {{/each}}
    
</script>

JavaScript

window.App = Ember.Application.create();

App.Thing = Ember.Object.extend({
    weight: null
});

App.set('thingsController', Ember.ArrayProxy.create({
    content: [
        App.Thing.create({weight: 100}),
        App.Thing.create({weight: 200}),
        App.Thing.create({weight: 300}),
        App.Thing.create({weight: 400})
        ],
     
    totalWeight: function() {
        var totalWeight = 0;
        this.get('content').forEach(function(item) {
            totalWeight += item.get('weight');
        });
        return totalWeight;
    }.property('@each.weight'),
    
    deleteThing: function(item) {
        this.removeObject(item);
    }
    
}));
    
App.ThingView = Ember.View.extend({
    things: App.thingsController,
    weightBinding: 'content.weight',

    percentWeight: function() {
        var weight = this.getPath('content.weight');
        var totalWeight = this.getPath('things.totalWeight');
        return (weight / totalWeight) * 100;
    }.property('content.weight', 'things.totalWeight'),

    deleteButton: Ember.Button.extend({
        click: function(event) {
            var item = this.getPath('contentView.content');
            App.thingsController.deleteThing(item);
        }
    })
});