elf
/
The-Backbone-Store
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Handled quantity update error that was fixed in Master, but not in Modern.

This commit is contained in:
Elf M. Sternberg 2011-08-07 21:34:41 -07:00
parent b7603b24f8
commit 6c6772dc79
7 changed files with 106 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
backbonestore.nw
View File

@ -169,8 +169,10 @@ Also, it would be nice to know the total price of the Item.
<<cart models>>= <<cart models>>=
class Item extends Backbone.Model class Item extends Backbone.Model
update: (amount) -> update: (amount) ->
@set if amount == @get('quantity')
quantity: @get('quantity') return
@set {quantity: amount}, {silent: true}
@collection.trigger('change', this)
price: () -> price: () ->
@get('product').get('price') * @get('quantity') @get('product').get('price') * @get('quantity')
@ -499,24 +501,24 @@ The product detail template is fairly straightforward. There is no
<<product detail template>>= <<product detail template>>=
%script#store_item_template(type= "text/x-underscore-template") %script#store_item_template(type= "text/x-underscore-template")
.item-detail .item-detail
.item-image .item-image
%img(src="<%= large_image %>" alt="<%= title %>")/ %img(src="<%= large_image %>" alt="<%= title %>")/
.item-info .item-info
.item-artist <%= artist %> .item-artist <%= artist %>
.item-title <%= title %> .item-title <%= title %>
.item-price $<%= price %> .item-price $<%= price %>
.item-form .item-form
%form(action="#/cart" method="post") %form(action="#/cart" method="post")
%p %p
%label Quantity: %label Quantity:
%input(type="text" size="2" name="quantity" value="1" class="uqf")/ %input(type="text" size="2" name="quantity" value="1" class="uqf")/
%p %p
%input(type="submit" value="Add to Cart" class="uq")/ %input(type="submit" value="Add to Cart" class="uq")/
.item-link .item-link
%a(href="<%= url %>") Buy this item on Amazon %a(href="<%= url %>") Buy this item on Amazon
.back-link .back-link
%a(href="#") &laquo; Back to Items %a(href="#") &laquo; Back to Items
@ @
So, let's talk about that shopping cart thing. We've been making the So, let's talk about that shopping cart thing. We've been making the
@ -735,6 +737,11 @@ rounded(radius)
border-top-right-radius: radius border-top-right-radius: radius
border-bottom-left-radius: radius border-bottom-left-radius: radius
background_gradient(base)
background: base
background: -webkit-gradient(linear, left top, left bottom, from(lighten(base, 20%)), to(darken(base, 20%)))
background: -moz-linear-gradient(top, lighten(base, 20%), darken(base, 20%))
@ @
And if you look down below you'll see the [[rounded()]] function And if you look down below you'll see the [[rounded()]] function
@ -756,9 +763,10 @@ body
#header #header
background: #C97E41 background_gradient(#999)
margin: 0px margin: 0px
padding: 20px padding: 20px
border-bottom: 1px solid #ccc
h1 h1
font-family: Inconsolata, Monaco, Courier, mono font-family: Inconsolata, Monaco, Courier, mono
@ -771,7 +779,7 @@ body
right: 0px right: 0px
text-align: right text-align: right
padding: 10px padding: 10px
background: #714625 background_gradient(#555)
color: #FFF color: #FFF
font-size: 12px font-size: 12px
font-weight: bold font-weight: bold
@ -802,9 +810,11 @@ img
font-size: 14px font-size: 14px
.item-detail .item-detail
margin: 10px 0 0 10px
.item-image .item-image
float:left float:left
margin-right: 10px
.item-info .item-info
padding: 100px 10px 0px 10px padding: 100px 10px 0px 10px

34
index.haml
View File

@ -18,24 +18,24 @@
%script#store_item_template(type= "text/x-underscore-template") %script#store_item_template(type= "text/x-underscore-template")
.item-detail .item-detail
.item-image .item-image
%img(src="<%= large_image %>" alt="<%= title %>")/ %img(src="<%= large_image %>" alt="<%= title %>")/
.item-info .item-info
.item-artist <%= artist %> .item-artist <%= artist %>
.item-title <%= title %> .item-title <%= title %>
.item-price $<%= price %> .item-price $<%= price %>
.item-form .item-form
%form(action="#/cart" method="post") %form(action="#/cart" method="post")
%p %p
%label Quantity: %label Quantity:
%input(type="text" size="2" name="quantity" value="1" class="uqf")/ %input(type="text" size="2" name="quantity" value="1" class="uqf")/
%p %p
%input(type="submit" value="Add to Cart" class="uq")/ %input(type="submit" value="Add to Cart" class="uq")/
.item-link .item-link
%a(href="<%= url %>") Buy this item on Amazon %a(href="<%= url %>") Buy this item on Amazon
.back-link .back-link
%a(href="#") &laquo; Back to Items %a(href="#") &laquo; Back to Items
%script#store_cart_template(type="text/x-underscore-template") %script#store_cart_template(type="text/x-underscore-template")
%p Items: <%= count %> ($<%= cost %>) %p Items: <%= count %> ($<%= cost %>)

48
index.html
View File

@ -21,29 +21,31 @@
</ul> </ul>
</script> </script>
<script id="store_item_template" type="text/x-underscore-template"> <script id="store_item_template" type="text/x-underscore-template">
<div class="item-detail"></div> <div class="item-detail">
<div class="item-image"> <div class="item-image">
<img alt="<%= title %>" src="<%= large_image %>" /> <img alt="<%= title %>" src="<%= large_image %>" />
</div> </div>
<div class="item-info"></div> <div class="item-info">
<div class="item-artist"><%= artist %></div> <div class="item-artist"><%= artist %></div>
<div class="item-title"><%= title %></div> <div class="item-title"><%= title %></div>
<div class="item-price">$<%= price %></div> <div class="item-price">$<%= price %></div>
<div class="item-form"></div> <div class="item-form"></div>
<form action="#/cart" method="post"> <form action="#/cart" method="post">
<p> <p>
<label>Quantity:</label> <label>Quantity:</label>
<input class="uqf" name="quantity" size="2" type="text" value="1" /> <input class="uqf" name="quantity" size="2" type="text" value="1" />
</p> </p>
<p> <p>
<input class="uq" type="submit" value="Add to Cart" /> <input class="uq" type="submit" value="Add to Cart" />
</p> </p>
</form> </form>
<div class="item-link"> <div class="item-link">
<a href="<%= url %>">Buy this item on Amazon</a> <a href="<%= url %>">Buy this item on Amazon</a>
</div> </div>
<div class="back-link"> <div class="back-link">
<a href="#">&laquo; Back to Items</a> <a href="#">&laquo; Back to Items</a>
</div>
</div>
</div> </div>
</script> </script>
<script id="store_cart_template" type="text/x-underscore-template"> <script id="store_cart_template" type="text/x-underscore-template">

13
jsonstore.css
View File

@ -6,9 +6,12 @@ body {
padding: 0px; padding: 0px;
} }
#header { #header {
background: #c97e41; background: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#b8b8b8), to(#7a7a7a));
background: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);
margin: 0px; margin: 0px;
padding: 20px; padding: 20px;
border-bottom: 1px solid #ccc;
} }
#header h1 { #header h1 {
font-family: Inconsolata, Monaco, Courier, mono; font-family: Inconsolata, Monaco, Courier, mono;
@ -21,7 +24,9 @@ body {
right: 0px; right: 0px;
text-align: right; text-align: right;
padding: 10px; padding: 10px;
background: #714625; background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444));
background: -moz-linear-gradient(top, #666, #444);
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -61,8 +66,12 @@ img {
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
.item-detail {
margin: 10px 0 0 10px;
}
.item-detail .item-image { .item-detail .item-image {
float: left; float: left;
margin-right: 10px;
} }
.item-detail .item-info { .item-detail .item-info {
padding: 100px 10px 0px 10px; padding: 100px 10px 0px 10px;

12
jsonstore.styl
View File

@ -12,6 +12,11 @@ rounded(radius)
border-top-right-radius: radius border-top-right-radius: radius
border-bottom-left-radius: radius border-bottom-left-radius: radius
background_gradient(base)
background: base
background: -webkit-gradient(linear, left top, left bottom, from(lighten(base, 20%)), to(darken(base, 20%)))
background: -moz-linear-gradient(top, lighten(base, 20%), darken(base, 20%))
body body
font-family: "Lucida Grande", Lucida, Helvetica, Arial, sans-serif font-family: "Lucida Grande", Lucida, Helvetica, Arial, sans-serif
background: #FFF background: #FFF
@ -21,9 +26,10 @@ body
#header #header
background: #C97E41 background_gradient(#999)
margin: 0px margin: 0px
padding: 20px padding: 20px
border-bottom: 1px solid #ccc
h1 h1
font-family: Inconsolata, Monaco, Courier, mono font-family: Inconsolata, Monaco, Courier, mono
@ -36,7 +42,7 @@ body
right: 0px right: 0px
text-align: right text-align: right
padding: 10px padding: 10px
background: #714625 background_gradient(#555)
color: #FFF color: #FFF
font-size: 12px font-size: 12px
font-weight: bold font-weight: bold
@ -67,9 +73,11 @@ img
font-size: 14px font-size: 14px
.item-detail .item-detail
margin: 10px 0 0 10px
.item-image .item-image
float:left float:left
margin-right: 10px
.item-info .item-info
padding: 100px 10px 0px 10px padding: 100px 10px 0px 10px

6
store.coffee
View File

@ -12,8 +12,10 @@ class ProductCollection extends Backbone.Collection
class Item extends Backbone.Model class Item extends Backbone.Model
update: (amount) -> update: (amount) ->
@set if amount == @get('quantity')
quantity: @get('quantity') return
@set {quantity: amount}, {silent: true}
@collection.trigger('change', this)
price: () -> price: () ->
@get('product').get('price') * @get('quantity') @get('product').get('price') * @get('quantity')

10
store.js
View File

@ -36,9 +36,15 @@
Item.__super__.constructor.apply(this, arguments); Item.__super__.constructor.apply(this, arguments);
} }
Item.prototype.update = function(amount) { Item.prototype.update = function(amount) {
return this.set({ if (amount === this.get('quantity')) {
quantity: this.get('quantity') return;
}
this.set({
quantity: amount
}, {
silent: true
}); });
return this.collection.trigger('change', this);
}; };
Item.prototype.price = function() { Item.prototype.price = function() {
return this.get('product').get('price') * this.get('quantity'); return this.get('product').get('price') * this.get('quantity');