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>>=
class Item extends Backbone.Model
update: (amount) ->
@set
quantity: @get('quantity')
if amount == @get('quantity')
return
@set {quantity: amount}, {silent: true}
@collection.trigger('change', this)
price: () ->
@get('product').get('price') * @get('quantity')
@ -499,24 +501,24 @@ The product detail template is fairly straightforward. There is no
<<product detail template>>=
%script#store_item_template(type= "text/x-underscore-template")
.item-detail
.item-image
%img(src="<%= large_image %>" alt="<%= title %>")/
.item-info
.item-artist <%= artist %>
.item-title <%= title %>
.item-price $<%= price %>
.item-form
%form(action="#/cart" method="post")
%p
%label Quantity:
%input(type="text" size="2" name="quantity" value="1" class="uqf")/
%p
%input(type="submit" value="Add to Cart" class="uq")/
.item-image
%img(src="<%= large_image %>" alt="<%= title %>")/
.item-info
.item-artist <%= artist %>
.item-title <%= title %>
.item-price $<%= price %>
.item-form
%form(action="#/cart" method="post")
%p
%label Quantity:
%input(type="text" size="2" name="quantity" value="1" class="uqf")/
%p
%input(type="submit" value="Add to Cart" class="uq")/
.item-link
%a(href="<%= url %>") Buy this item on Amazon
.back-link
%a(href="#") &laquo; Back to Items
.item-link
%a(href="<%= url %>") Buy this item on Amazon
.back-link
%a(href="#") &laquo; Back to Items
@
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-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
@ -756,9 +763,10 @@ body
#header
background: #C97E41
background_gradient(#999)
margin: 0px
padding: 20px
border-bottom: 1px solid #ccc
h1
font-family: Inconsolata, Monaco, Courier, mono
@ -771,7 +779,7 @@ body
right: 0px
text-align: right
padding: 10px
background: #714625
background_gradient(#555)
color: #FFF
font-size: 12px
font-weight: bold
@ -802,9 +810,11 @@ img
font-size: 14px
.item-detail
margin: 10px 0 0 10px
.item-image
float:left
margin-right: 10px
.item-info
padding: 100px 10px 0px 10px

34
index.haml
View File

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

48
index.html
View File

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

13
jsonstore.css
View File

@ -6,9 +6,12 @@ body {
padding: 0px;
}
#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;
padding: 20px;
border-bottom: 1px solid #ccc;
}
#header h1 {
font-family: Inconsolata, Monaco, Courier, mono;
@ -21,7 +24,9 @@ body {
right: 0px;
text-align: right;
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;
font-size: 12px;
font-weight: bold;
@ -61,8 +66,12 @@ img {
font-weight: bold;
font-size: 14px;
}
.item-detail {
margin: 10px 0 0 10px;
}
.item-detail .item-image {
float: left;
margin-right: 10px;
}
.item-detail .item-info {
padding: 100px 10px 0px 10px;

12
jsonstore.styl
View File

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

6
store.coffee
View File

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

10
store.js
View File

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