Why Ember.js Rocks - Helpers 2

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.1.min.js"></script>
<script src="//cdn.jsdelivr.net/accounting.js/0.3.2/accounting.min.js"></script>
<script type="text/x-handlebars">
    <ol>
        {{#each item in model}}
        <li>{{item.name}} {{}}</li>
        {{/each}}
    </ol>
    There are {{model.length}} phones in your cart.
    <h3 class="subheader">Total: {{money totalCost precision=2 symbol='€'}}</h3>
</script>

CSS

body { margin: 3em; }

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
    model: [
        {name: 'Galaxy SIII', cost: 599.99},
        {name: 'Nexus 4', cost: 299.99},
        {name: 'iPhone 5', cost: 699.99},
        {name: 'iPhone 5S', cost: 699.99}
    ],
    signCost: function(){
        return this.model.reduce(function(total, phone) { return total + phone.cost }, 1);
    }.property('phones')
    }
    totalCost: function() {
        return this.model.reduce(function(total, phone) { return total + phone.cost }, 0);
    }.property('phones')
});

Ember.Handlebars.helper('money', function(value, options) {
    return accounting.formatMoney(value, (options.hash.symbol || '$'), (options.hash.precision || 0));
});