Updating to post-modern standards.
This commit is contained in:
Elf M. Sternberg
parent
7678aa3e16
commit
88cf744296
|
|
@ -0,0 +1,54 @@
|
||||||
|
!!! 5
|
||||||
|
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
|
||||||
|
%head
|
||||||
|
%title The Backbone Store
|
||||||
|
%link{:charset => "utf-8", :href => "jsonstore.css", :rel => "stylesheet", :type => "text/css"}/
|
||||||
|
|
||||||
|
%script#store_index_template(type="text/x-underscore-tmplate")
|
||||||
|
%h1 Product Catalog
|
||||||
|
%ul
|
||||||
|
<% for(i=0,l=products.length;i<l;++i) { p = products[i]; %>
|
||||||
|
%li.item
|
||||||
|
.item-image
|
||||||
|
%a{:href => "#item/<%= p.id %>"}
|
||||||
|
%img{:src => "<%= p.image %>", :alt => "<%= p.title %>"}/
|
||||||
|
.item-artist <%= p.artist %>
|
||||||
|
.item-title <%= p.title %>
|
||||||
|
.item-price $<%= p.price %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
%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-link
|
||||||
|
%a(href="<%= url %>") Buy this item on Amazon
|
||||||
|
.back-link
|
||||||
|
%a(href="#") « Back to Items
|
||||||
|
|
||||||
|
%script#store_cart_template(type="text/x-underscore-template")
|
||||||
|
%p Items: <%= count %> ($<%= cost %>)
|
||||||
|
|
||||||
|
%body
|
||||||
|
#container
|
||||||
|
#header
|
||||||
|
%h1
|
||||||
|
The Backbone Store
|
||||||
|
.cart-info
|
||||||
|
#main
|
||||||
|
%script{:src => "jquery-1.6.2.min.js", :type => "text/javascript"}
|
||||||
|
%script{:src => "underscore.js", :type => "text/javascript"}
|
||||||
|
%script{:src => "backbone.js", :type => "text/javascript"}
|
||||||
|
%script{:src => "store.js", :type => "text/javascript"}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
class Product extends Backbone.Model
|
||||||
|
|
||||||
|
class ProductCollection extends Backbone.Collection
|
||||||
|
model: Product
|
||||||
|
|
||||||
|
initialize: (models, options) ->
|
||||||
|
@url = options.url
|
||||||
|
@
|
||||||
|
|
||||||
|
comparator: (item) ->
|
||||||
|
item.get('title')
|
||||||
|
|
||||||
|
|
||||||
|
class Item extends Backbone.Model
|
||||||
|
update: (amount) ->
|
||||||
|
@set {quantity: @get('quantity') + amount}
|
||||||
|
|
||||||
|
class ItemCollection extends Backbone.Collection
|
||||||
|
model: Item
|
||||||
|
|
||||||
|
getOrCreateItemForProduct: (product) ->
|
||||||
|
pid = product.get('id')
|
||||||
|
i = this.detect (obj) -> (obj.get('product').get('id') == pid)
|
||||||
|
if (i)
|
||||||
|
return i
|
||||||
|
i = new Item
|
||||||
|
product: product
|
||||||
|
quantity: 0
|
||||||
|
@add i, {silent: true}
|
||||||
|
i
|
||||||
|
|
||||||
|
getTotalCount: () ->
|
||||||
|
addup = (memo, obj) -> obj.get('quantity') + memo
|
||||||
|
@reduce addup, 0
|
||||||
|
|
||||||
|
getTotalCost: () ->
|
||||||
|
addup = (memo, obj) ->
|
||||||
|
(obj.get('product').get('price') *
|
||||||
|
obj.get('quantity')) + memo
|
||||||
|
@reduce addup, 0
|
||||||
|
|
||||||
|
class _BaseView extends Backbone.View
|
||||||
|
parent: $('#main')
|
||||||
|
className: 'viewport'
|
||||||
|
|
||||||
|
initialize: () ->
|
||||||
|
@el = $(@el)
|
||||||
|
@el.hide()
|
||||||
|
@parent.append(@el)
|
||||||
|
@
|
||||||
|
|
||||||
|
hide: () ->
|
||||||
|
if not @el.is(':visible')
|
||||||
|
return null
|
||||||
|
|
||||||
|
# Make a note here about how the => operator replaces the need for
|
||||||
|
# _.bind()
|
||||||
|
promise = $.Deferred (dfd) => @el.fadeOut('fast', dfd.resolve)
|
||||||
|
@trigger 'hide', @
|
||||||
|
promise.promise()
|
||||||
|
|
||||||
|
show: () ->
|
||||||
|
if @el.is(':visible')
|
||||||
|
return
|
||||||
|
|
||||||
|
promise = $.Deferred (dfd) => @el.fadeIn('fast', dfd.resolve)
|
||||||
|
@trigger 'show', @
|
||||||
|
promise.promise()
|
||||||
|
|
||||||
|
|
||||||
|
class ProductListView extends _BaseView
|
||||||
|
id: 'productlistview'
|
||||||
|
template: $("#store_index_template").html()
|
||||||
|
|
||||||
|
initialize: (options) ->
|
||||||
|
@constructor.__super__.initialize.apply @, [options]
|
||||||
|
@collection.bind 'reset', _.bind(@render, @)
|
||||||
|
|
||||||
|
render: () ->
|
||||||
|
@el.html(_.template(@template, {'products': @collection.toJSON()}))
|
||||||
|
@
|
||||||
|
|
||||||
|
class ProductView extends _BaseView
|
||||||
|
id: 'productitemview'
|
||||||
|
template: $("#store_item_template").html()
|
||||||
|
initialize: (options) ->
|
||||||
|
@constructor.__super__.initialize.apply @, [options]
|
||||||
|
@itemcollection = options.itemcollection
|
||||||
|
@item = @itemcollection.getOrCreateItemForProduct @model
|
||||||
|
@
|
||||||
|
|
||||||
|
events:
|
||||||
|
"keypress .uqf" : "updateOnEnter"
|
||||||
|
"click .uq" : "update"
|
||||||
|
|
||||||
|
update: (e) ->
|
||||||
|
e.preventDefault()
|
||||||
|
@item.update parseInt($('.uqf').val())
|
||||||
|
|
||||||
|
updateOnEnter: (e) ->
|
||||||
|
if (e.keyCode == 13)
|
||||||
|
@update e
|
||||||
|
|
||||||
|
render: () ->
|
||||||
|
@el.html(_.template(@template, @model.toJSON()));
|
||||||
|
@
|
||||||
|
|
||||||
|
class CartWidget extends Backbone.View
|
||||||
|
el: $('.cart-info')
|
||||||
|
template: $('#store_cart_template').html()
|
||||||
|
|
||||||
|
initialize: () ->
|
||||||
|
@collection.bind('change', _.bind(@render, @));
|
||||||
|
|
||||||
|
render: () ->
|
||||||
|
tel = @el.html _.template @template,
|
||||||
|
'count': @collection.getTotalCount()
|
||||||
|
'cost': @collection.getTotalCost()
|
||||||
|
tel.animate({paddingTop: '30px'}).animate({paddingTop: '10px'})
|
||||||
|
@
|
||||||
|
|
||||||
|
class BackboneStore extends Backbone.Router
|
||||||
|
views: {}
|
||||||
|
products: null
|
||||||
|
cart: null
|
||||||
|
|
||||||
|
routes:
|
||||||
|
"": "index"
|
||||||
|
"item/:id": "product"
|
||||||
|
|
||||||
|
initialize: (data) ->
|
||||||
|
@cart = new ItemCollection()
|
||||||
|
new CartWidget
|
||||||
|
collection: @cart
|
||||||
|
|
||||||
|
@products = new ProductCollection [],
|
||||||
|
url: 'data/items.json'
|
||||||
|
@views =
|
||||||
|
'_index': new ProductListView
|
||||||
|
collection: @products
|
||||||
|
$.when(@products.fetch({reset: true}))
|
||||||
|
.then(() -> window.location.hash = '')
|
||||||
|
@
|
||||||
|
|
||||||
|
hideAllViews: () ->
|
||||||
|
_.select(_.map(@views, (v) -> return v.hide()),
|
||||||
|
(t) -> t != null)
|
||||||
|
|
||||||
|
index: () ->
|
||||||
|
view = @views['_index']
|
||||||
|
$.when(@hideAllViews()).then(() -> view.show())
|
||||||
|
|
||||||
|
product: (id) ->
|
||||||
|
product = @products.detect (p) -> p.get('id') == (id)
|
||||||
|
view = (@views['item.' + id] ||= new ProductView(
|
||||||
|
model: product,
|
||||||
|
itemcollection: @cart
|
||||||
|
).render())
|
||||||
|
$.when(@hideAllViews()).then(
|
||||||
|
() -> view.show())
|
||||||
|
|
||||||
|
$(document).ready () ->
|
||||||
|
new BackboneStore();
|
||||||
|
Backbone.history.start();
|
||||||
Loading…
Reference in New Issue