Handled quantity update error that was fixed in Master, but not in Modern.
This commit is contained in:
parent
b7603b24f8
commit
6c6772dc79
|
@ -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')
|
||||
|
@ -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
|
||||
|
|
|
@ -21,11 +21,11 @@
|
|||
</ul>
|
||||
</script>
|
||||
<script id="store_item_template" type="text/x-underscore-template">
|
||||
<div class="item-detail"></div>
|
||||
<div class="item-detail">
|
||||
<div class="item-image">
|
||||
<img alt="<%= title %>" src="<%= large_image %>" />
|
||||
</div>
|
||||
<div class="item-info"></div>
|
||||
<div class="item-info">
|
||||
<div class="item-artist"><%= artist %></div>
|
||||
<div class="item-title"><%= title %></div>
|
||||
<div class="item-price">$<%= price %></div>
|
||||
|
@ -45,6 +45,8 @@
|
|||
<div class="back-link">
|
||||
<a href="#">« Back to Items</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id="store_cart_template" type="text/x-underscore-template">
|
||||
<p>Items: <%= count %> ($<%= cost %>)</p>
|
||||
|
|
|
@ -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,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
|
||||
|
|
|
@ -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
10
store.js
|
@ -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');
|
||||
|
|
Loading…
Reference in New Issue