From 58c3d50bcef69a0feea0f1562075736a4b74dfba Mon Sep 17 00:00:00 2001 From: "Elf M. Sternberg" Date: Sun, 7 Aug 2011 17:44:17 -0700 Subject: [PATCH] Fixed a bug with the updater. --- Makefile | 2 +- backbonestore.nw | 118 ++++++++++++++++++++++------------------- index.html | 134 ++++++++++++++++++++++++----------------------- jsonstore.css | 9 +++- store.js | 34 +++++++----- 5 files changed, 162 insertions(+), 135 deletions(-) diff --git a/Makefile b/Makefile index df75d12..64f4245 100644 --- a/Makefile +++ b/Makefile @@ -39,7 +39,7 @@ store.js: backbonestore.nw rm $*.nw-tmp; \ fi -index.html: +index.html: backbonestore.nw @ $(ECHO) $(NOTANGLE) -c -R$@ $< @ - $(NOTANGLE) -c -R$@ $< > $*.nw-html-tmp @ if [ -s "$*.nw-html-tmp" ]; then \ diff --git a/backbonestore.nw b/backbonestore.nw index ba5bb1e..2518fee 100644 --- a/backbonestore.nw +++ b/backbonestore.nw @@ -137,16 +137,18 @@ product, but a reference to the products and a quantity. One thing we will be doing is changing the quantity, so I have provided a convenience function for the Item that allows you to do that. Now, no client classes such as Views need to know how the -quantity is updated. +quantity is updated. Also, it would be nice to know the total price of the Item. <>= var Item = Backbone.Model.extend({ update: function(amount) { - this.set({'quantity': amount}); + this.set({'quantity': amount}, {silent: true}); + this.collection.trigger('change', this); }, price: function() { + console.log(this.get('product').get('title'), this.get('quantity')); return this.get('product').get('price') * this.get('quantity'); } }); @@ -236,7 +238,7 @@ and remove tabs from the top of the viewport as needed. <>= var _BaseView = Backbone.View.extend({ - parent: '#main', + parent: $('#main'), className: 'viewport', @ @@ -313,8 +315,8 @@ for our one-page application: <> - <> - <> + <> + <>
@@ -388,23 +390,23 @@ you should understand this fairly easily. And here is the HTML: <>= - + @ %$ @@ -467,12 +469,20 @@ get its id and so forth. All of that has been put into the shopping cart model, which is where it belongs: \textit{knowledge about items and each item's relationship to its collection belongs in the collection}. + +Look closely at the [[update()]] method. The reference [[this.\$]] is +a special Backbone object that limits selectors to objects inside the +element of the view. Without it, jQuery would have found the first +input field of class 'uqf' in the DOM, not the one for this specific +view. [[this.\$('.uqf')]] is shorthand for [[$('uqf', this.el)]], and +helps clarify what it is you're looking for. + %' <>= update: function(e) { e.preventDefault(); - this.item.update(parseInt($('.uqf').val())); + this.item.update(parseInt(this.$('.uqf').val())); }, updateOnEnter: function(e) { @@ -499,33 +509,33 @@ The product detail template is fairly straightforward. There is no [[underscore]] magic because there are no loops. <>= - + @ So, let's talk about that shopping cart thing. We've been making the @@ -570,9 +580,9 @@ show that it did changed: And the HTML for the template is dead simple: <>= - + @ %$ @@ -722,6 +732,8 @@ Here's the entirety of the program: <> +<> + <> <> diff --git a/index.html b/index.html index 710d529..1f26fa4 100644 --- a/index.html +++ b/index.html @@ -1,73 +1,75 @@ - - The Backbone Store - - - + +
+
<%= artist %>
+
<%= title %>
+
$<%= price %>
+
+

+ + +

+

+ +

+
+
+ Buy this item on Amazon +
+
+ « Back to Items +
+
+ + - + + +
+ - - - -
- -
-
- - - - - +
+
+ + + + + diff --git a/jsonstore.css b/jsonstore.css index 7c108a1..ea64716 100644 --- a/jsonstore.css +++ b/jsonstore.css @@ -33,12 +33,17 @@ body { img { border: 0; } +#productlistview ul { + list-style: none; +} .item { + display: border; float:left; width: 250px; - margin-right: 3px; - padding: 2px; + margin-right: 10px; + margin-bottom: 10px; + padding: 10px; border: 1px solid #ccc; text-align:center; font-size: 12px; diff --git a/store.js b/store.js index 5184881..a9853fd 100644 --- a/store.js +++ b/store.js @@ -16,12 +16,18 @@ var Item = Backbone.Model.extend({ update: function(amount) { - this.set({'quantity': this.get('quantity') + amount}); + this.set({'quantity': amount}, {silent: true}); + this.collection.trigger('change', this); + }, + price: function() { + console.log(this.get('product').get('title'), this.get('quantity')); + return this.get('product').get('price') * this.get('quantity'); } }); var ItemCollection = Backbone.Collection.extend({ model: Item, + getOrCreateItemForProduct: function(product) { var i, pid = product.get('id'), @@ -35,18 +41,19 @@ this.add(i, {silent: true}) return i; }, + getTotalCount: function() { return this.reduce(function(memo, obj) { return obj.get('quantity') + memo; }, 0); }, + getTotalCost: function() { return this.reduce(function(memo, obj) { - return (obj.get('product').get('price') * - obj.get('quantity')) + memo; }, 0); - + return obj.price() + memo; }, 0); } }); + var _BaseView = Backbone.View.extend({ parent: $('#main'), className: 'viewport', @@ -63,9 +70,8 @@ return null; } promise = $.Deferred(_.bind(function(dfd) { - this.el.fadeOut('fast', dfd.resolve)}, this)).promise(); - this.trigger('hide', this); - return promise; + this.el.fadeOut('fast', dfd.resolve)}, this)); + return promise.promise(); }, show: function() { @@ -73,13 +79,12 @@ return; } promise = $.Deferred(_.bind(function(dfd) { - this.el.fadeIn('fast', dfd.resolve) }, this)).promise(); - - this.trigger('show', this); - return promise; + this.el.fadeIn('fast', dfd.resolve) }, this)) + return promise.promise(); } }); + var ProductListView = _BaseView.extend({ id: 'productlistview', template: $("#store_index_template").html(), @@ -96,6 +101,7 @@ } }); + var ProductView = _BaseView.extend({ id: 'productitemview', template: $("#store_item_template").html(), @@ -113,7 +119,7 @@ update: function(e) { e.preventDefault(); - this.item.update(parseInt($('.uqf').val())); + this.item.update(parseInt(this.$('.uqf').val())); }, updateOnEnter: function(e) { @@ -128,6 +134,7 @@ } }); + var CartWidget = Backbone.View.extend({ el: $('.cart-info'), template: $('#store_cart_template').html(), @@ -137,7 +144,6 @@ }, render: function() { - console.log(arguments); this.el.html( _.template(this.template, { 'count': this.collection.getTotalCount(), @@ -147,6 +153,7 @@ } }); + var BackboneStore = Backbone.Router.extend({ views: {}, products: null, @@ -200,4 +207,5 @@ new BackboneStore(); Backbone.history.start(); }); + }).call(this);