Bind to computed array proxy computed properties

Incorrect 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"}}
            {{content.weight}} - {{content.percentWeight}} % 
            {{#view deleteButton contentBinding="content"}}Delete{{/view}}
        {{/view}}
    {{/each}}
    
</script>

JavaScript

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

App.Thing = Ember.Object.extend({
    weight: null,
    
    percentWeight: function() {
        return (this.get('weight') / App.thingsController.get('totalWeight')) * 100;
    }.property('weight')
    // This below doesn't work - can't access this property error
    //}.property('weight', 'App.thingsController.totalWeight')
});
    
App.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'),
    
    destroy: function(item) {
        this.removeObject(item);
    }
    
});

App.ThingView = Ember.View.extend({
    deleteButton: Ember.Button.extend({
        click: function(event) {
            var item = this.get('content');
            App.thingsController.destroy(item);
        }
    })
});