/jsbin.fuxijasi.css

## jsbin.fuxijasi.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.fuxijasi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
</head>
<body>

  <script type="text/x-handlebars">
    <h2> Tony's Store </h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="items">
    <h3> My Cart </h3>
      <table border=1 cellpadding='10'>
        <thead>
          <tr>
            <th>Product</th>
            <th>Qty</td>
            <th>Price</td>
            <th>Subtotal</td>
          </tr>
        </thead>
        <tbody>

         {{! I chose to do it with itemController instead of `render`}}
         {{! render would want you to define the 'item' template }}
         {{! if you were to do it like this, you would call render in the block }}
         {{! more info: http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper }}

         {{#each item in content itemController='item'}}
            <tr>
              <td>{{item.name}}</td>
              <td>{{input type='number' min="0" value=item.quantity onchange=applyChanges}}
              <td>{{item.price}}</td>
              <td>{{item.total}}</td>
            </tr>

          {{/each}}

          {{! note: you can do {{#each itemController='item'}}
          {{! many ways to trim a bonzi tree... }}
          {{! if you did, you would use `this` inside the block }}

          <tr>
            <td colspan=3>Total</td>
            <td> {{controller.cartTotal}} </td>

            {{! note: the `controller` can be left out bc we are in the it's scope}}
            {{! being explicit everywhere helped me learn }}

          </tr>
        </tbody>
      </table>


  </script>
</body>
</html>

## jsbin.fuxijasi.js
// Init
//
App = Ember.Application.create();
App.Router.map(function() {
  this.resource("items");
});


// Routes
//
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo("items"); // fake it till you make it
  }
});

App.ItemsRoute = Ember.Route.extend({
  model: function() {
    return [
      App.Item.create({ id: 1, name: 'Shirt', quantity: 0, price: 10.0}),
      App.Item.create({ id: 2, name: 'Pants', quantity: 0, price: 7.0}),
      App.Item.create({ id: 3, name: 'Sweater', quantity: 0, price: 12.0 })
    ];
  }
});


// Models
//
App.Item = Ember.Object.extend({
  total: function() {
    return Math.abs(this.get('quantity') * this.get('price'));
  }.property('quantity', 'price')
});


// Controllers
//
App.ItemsController = Ember.ArrayController.extend({
  cartTotal: function() {
    return this.get('content').reduce(function(total, item) {
      return total + item.get('total');
    }, 0);
  }.property("content.@each.total")
});

App.ItemController = Ember.ObjectController.extend({
  // You'd probably want to debounce this so you aren't
  // constantly writing to the store... (in your example)
  // Ember.run.debounce(this, func, 500);
  //
  applyChanges: function() {
    // e.g this.get('model').save(function(item) { ... })");
    alert("persist changes to item: "+ this.get("model.id"));
  }.observes("quantity")
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2> Tony's Store </h2>
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="items">
	<h3> My Cart </h3>
	<table border=1 cellpadding='10'>
	<thead>
	<tr>
	<th>Product</th>
	<th>Qty</td>
	<th>Price</td>
	<th>Subtotal</td>
	</tr>
	</thead>
	<tbody>

	{{! I chose to do it with itemController instead of `render`}}
	{{! render would want you to define the 'item' template }}
	{{! if you were to do it like this, you would call render in the block }}
	{{! more info: http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper }}

	{{#each item in content itemController='item'}}
	<tr>
	<td>{{item.name}}</td>
	<td>{{input type='number' min="0" value=item.quantity onchange=applyChanges}}
	<td>{{item.price}}</td>
	<td>{{item.total}}</td>
	</tr>

	{{/each}}

	{{! note: you can do {{#each itemController='item'}}
	{{! many ways to trim a bonzi tree... }}
	{{! if you did, you would use `this` inside the block }}

	<tr>
	<td colspan=3>Total</td>
	<td> {{controller.cartTotal}} </td>

	{{! note: the `controller` can be left out bc we are in the it's scope}}
	{{! being explicit everywhere helped me learn }}

	</tr>
	</tbody>
	</table>


	</script>
	</body>
	</html>
	// Init
	//
	App = Ember.Application.create();
	App.Router.map(function() {
	this.resource("items");
	});


	// Routes
	//
	App.IndexRoute = Ember.Route.extend({
	redirect: function() {
	this.transitionTo("items"); // fake it till you make it
	}
	});

	App.ItemsRoute = Ember.Route.extend({
	model: function() {
	return [
	App.Item.create({ id: 1, name: 'Shirt', quantity: 0, price: 10.0}),
	App.Item.create({ id: 2, name: 'Pants', quantity: 0, price: 7.0}),
	App.Item.create({ id: 3, name: 'Sweater', quantity: 0, price: 12.0 })
	];
	}
	});


	// Models
	//
	App.Item = Ember.Object.extend({
	total: function() {
	return Math.abs(this.get('quantity') * this.get('price'));
	}.property('quantity', 'price')
	});


	// Controllers
	//
	App.ItemsController = Ember.ArrayController.extend({
	cartTotal: function() {
	return this.get('content').reduce(function(total, item) {
	return total + item.get('total');
	}, 0);
	}.property("content.@each.total")
	});

	App.ItemController = Ember.ObjectController.extend({
	// You'd probably want to debounce this so you aren't
	// constantly writing to the store... (in your example)
	// Ember.run.debounce(this, func, 500);
	//
	applyChanges: function() {
	// e.g this.get('model').save(function(item) { ... })");
	alert("persist changes to item: "+ this.get("model.id"));
	}.observes("quantity")
	});