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

backbonestore.nw

@@ -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
+        if amount == @get('quantity')
-            quantity: @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

index.html

@@ -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="#">&laquo; Back to Items</a>
           </div>
+        </div>
+      </div>
     </script>
     <script id="store_cart_template" type="text/x-underscore-template">
       <p>Items: <%= count %> ($<%= cost %>)</p>

jsonstore.css

@@ -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;

jsonstore.styl

@@ -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

store.coffee

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

store.js

@@ -36,9 +36,15 @@
       Item.__super__.constructor.apply(this, arguments);
     }
     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() {
       return this.get('product').get('price') * this.get('quantity');