<script type="text/x-handlebars">
  <p>There are {{model.length}} phones in your cart.</p>
  <table>
  {{#each model}}
    <tr>
      <td>{{name}}</td>
      <td>{{cost}}</td>
    </tr>
  {{/each}}
    <tr>
      <th>Total</th>
      <td>{{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')
});

External CSS

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

External JavaScript

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