vinhboy · October 10, 2011 01:57
diff --git a/gistfile1.phtml b/gistfile1.phtml
 <html>
 <body>
      <table id="cart">
        <thead>
          <tr>
            <th></th>
            <th>Price/Bottle</th>
            <th>Quantity</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
            <tr id="item-1" class="item-row">
              <td>Wine 1</td>
              <td data-price="20" class="price">$20</td>
              <td><input class="quantity" type="text" value="" size="2" /></td>
              <td><span class="total"></span></td>
            </tr>
            <tr id="item-2" class="item-row">
              <td>Wine 2</td>
              <td data-price="20" class="price">$20</td>
              <td><input class="quantity" type="text" value="" size="2" /></td>
              <td><span class="total"></span></td>
            </tr>
          <tr>
            <td colspan="2">Subtotals:</td>
            <td><span id="subquantity"></span></td>
            <td><span id="subtotal"></span></td>
          </tr>
          <tr>
            <td colspan="3">10% Discount (applied to all orders of 12 bottles or more):</td>
            <td><span id="discount"></span></td>
          </tr>
          <tr>
            <td colspan="3">Pre-tax Total:</td>
            <td><span id="pretax"></span></td>
          </tr>
          <tr>
            <td colspan="3">Tax (8.5%):</td>
            <td><span id="tax"></span></td>
          </tr>
          <tr>
            <td colspan="3"><strong>Wine Total:</strong></td>
            <td><span id="total"></span></td>
          </tr>
        </tbody>
      </table>

 <script type="text/javascript" src="http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.6.js"></script>
 <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
 <script type="text/javascript">
  jQuery(document).ready(function($){
    function toCurrency(num) {
       return '$' + parseFloat(num).toFixed(2);
    };
    var Item = Backbone.Model.extend({
      defaults: {
        price: 0,
        quantity: 0
      },
      total: function(){
        return this.get('price') * this.get('quantity');
      }
    });
    var ItemsCollection = Backbone.Collection.extend({
      model: Item,
      initialize: function(){
        
      },
      subquantity: function(){
        subquantity = 0;
        this.each(function(item){
          subquantity += parseInt(item.get('quantity'));
        });
        return subquantity;
      },
      subtotal: function(){
        total = 0;
        this.each(function(item){
          total += parseInt(item.total());
        });
        return total;
      },
      discount: function(){
        return (this.subquantity() > 11) ? (this.subtotal() * .1) : 0;
      },
      pretax: function(){
        return this.subtotal() - this.discount();
      },
      tax: function(){
        return this.pretax() * 0.085;
      },
      total: function(){
        return this.pretax() + this.tax();
      }
    });
    var ItemView = Backbone.View.extend({
      events: {
        "change .quantity": "updateQuantity"
      },
      updateQuantity: function(){
        this.model.set({quantity: this.$('.quantity').val()});
        this.$('.total').text(toCurrency(this.model.total()));
      }
    });
    var CartView = Backbone.View.extend({
      events: {
        "change .quantity": "updateSub"
      },
      updateSub: function(){
        this.$('#subquantity').text(this.collection.subquantity());
        this.$('#subtotal').text(toCurrency(this.collection.subtotal()));
        this.$('#discount').text(toCurrency(this.collection.discount()));
        this.$('#pretax').text(toCurrency(this.collection.pretax()));
        this.$('#tax').text(toCurrency(this.collection.tax()));
        this.$('#total').text(toCurrency(this.collection.total()));
      }
    });
    var totals = new ItemsCollection();
    new CartView({collection:totals,el:'#cart'});
    $('.item-row').each(function(index){
      model = new Item({ price:$('.price',this).attr('data-price') })
      new ItemView({model:model, el: $(this)});
      totals.add(model);
    });
  })
 </script>

 </body>
 </html>
	<html>
	<body>
	<table id="cart">
	<thead>
	<tr>
	<th></th>
	<th>Price/Bottle</th>
	<th>Quantity</th>
	<th>Total</th>
	</tr>
	</thead>
	<tbody>
	<tr id="item-1" class="item-row">
	<td>Wine 1</td>
	<td data-price="20" class="price">$20</td>
	<td><input class="quantity" type="text" value="" size="2" /></td>
	<td><span class="total"></span></td>
	</tr>
	<tr id="item-2" class="item-row">
	<td>Wine 2</td>
	<td data-price="20" class="price">$20</td>
	<td><input class="quantity" type="text" value="" size="2" /></td>
	<td><span class="total"></span></td>
	</tr>
	<tr>
	<td colspan="2">Subtotals:</td>
	<td><span id="subquantity"></span></td>
	<td><span id="subtotal"></span></td>
	</tr>
	<tr>
	<td colspan="3">10% Discount (applied to all orders of 12 bottles or more):</td>
	<td><span id="discount"></span></td>
	</tr>
	<tr>
	<td colspan="3">Pre-tax Total:</td>
	<td><span id="pretax"></span></td>
	</tr>
	<tr>
	<td colspan="3">Tax (8.5%):</td>
	<td><span id="tax"></span></td>
	</tr>
	<tr>
	<td colspan="3"><strong>Wine Total:</strong></td>
	<td><span id="total"></span></td>
	</tr>
	</tbody>
	</table>

	<script type="text/javascript" src="http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.6.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function($){
	function toCurrency(num) {
	return '$' + parseFloat(num).toFixed(2);
	};
	var Item = Backbone.Model.extend({
	defaults: {
	price: 0,
	quantity: 0
	},
	total: function(){
	return this.get('price') * this.get('quantity');
	}
	});
	var ItemsCollection = Backbone.Collection.extend({
	model: Item,
	initialize: function(){

	},
	subquantity: function(){
	subquantity = 0;
	this.each(function(item){
	subquantity += parseInt(item.get('quantity'));
	});
	return subquantity;
	},
	subtotal: function(){
	total = 0;
	this.each(function(item){
	total += parseInt(item.total());
	});
	return total;
	},
	discount: function(){
	return (this.subquantity() > 11) ? (this.subtotal() * .1) : 0;
	},
	pretax: function(){
	return this.subtotal() - this.discount();
	},
	tax: function(){
	return this.pretax() * 0.085;
	},
	total: function(){
	return this.pretax() + this.tax();
	}
	});
	var ItemView = Backbone.View.extend({
	events: {
	"change .quantity": "updateQuantity"
	},
	updateQuantity: function(){
	this.model.set({quantity: this.$('.quantity').val()});
	this.$('.total').text(toCurrency(this.model.total()));
	}
	});
	var CartView = Backbone.View.extend({
	events: {
	"change .quantity": "updateSub"
	},
	updateSub: function(){
	this.$('#subquantity').text(this.collection.subquantity());
	this.$('#subtotal').text(toCurrency(this.collection.subtotal()));
	this.$('#discount').text(toCurrency(this.collection.discount()));
	this.$('#pretax').text(toCurrency(this.collection.pretax()));
	this.$('#tax').text(toCurrency(this.collection.tax()));
	this.$('#total').text(toCurrency(this.collection.total()));
	}
	});
	var totals = new ItemsCollection();
	new CartView({collection:totals,el:'#cart'});
	$('.item-row').each(function(index){
	model = new Item({ price:$('.price',this).attr('data-price') })
	new ItemView({model:model, el: $(this)});
	totals.add(model);
	});
	})
	</script>

	</body>
	</html>