<script src="//cdn.jsdelivr.net/accounting.js/0.3.2/accounting.min.js"></script>
<script type="text/x-handlebars">
  <p>There are {{model.length}} phones in your cart.</p>
  <table>
  {{#each model}}
    <tr>
      <td>{{name}}</td>
      <td>{{money cost precision=2}}</td>
    </tr>
  {{/each}}
    <tr>
      <th>Approximate Total</th>
      <td>{{money totalCost}}</td>
    </tr>
  </table>
</script>
App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
  model: [
    { name: 'Galaxy S5', cost: 599.99 },
    { name: 'Nexus 5', cost: 349.99 },
    { name: 'iPhone 5s', cost: 649.99 }
  ],
  totalCost: function() {
    return this.get('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));
});

External CSS

  1. https://kerricklong.com/css/style.css

External JavaScript

  1. https://kerricklong.com/js/ember-with-deps-1.3.1.js