Why Ember.js Rocks - Helpers

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 type="text/x-handlebars">
    There are {{model.length}} phones in your cart.
    <h3 class="subheader">Total: {{totalCost}}</h3>
</script>

CSS

body { margin: 3em; }

JavaScript

App = Ember.Application.create();

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