CoffeeScript

by caffeinated_tech

HTML

<ul>
  <li class="product" data-id="1">Product 1</li>
  <li class="product" data-id="2">Product 2</li>
  <li class="product" data-id="3">Product 2</li>
  <li class="product" data-id="4">Product 3</li>
  <li class="product" data-id="5">Product 4</li>
  <div id="submit">Create Purchase</div>
</ul>

<h4>check logs by opening the console</h4>

CSS

.console {
  background-color: grey;
  color: white;
  height: 500px;
}

h4 {
  color: red;
  width: 100%;
  text-align: center;
}

CoffeeScript

class Purchase
  constructor: () -> 
    # on $(document).ready a new Purchase is created
    @submit = $('#submit')
    # for each div.product a new Product instance is created
    @products = $.map $('.product'), (product, i) -> 
      new Product(product)
    @registerEvents()
	
  onSubmit: => 
    console.log "send to server..."
    console.log JSON.stringify(@serialize(), null, 2)
  
  registerEvents: -> 
  	@submit.click @onSubmit
    
  serialize: =>
    items_attributes: (product.serialize() for product in @products when product.amount isnt 0)
    
class Product  
  constructor: (product) ->
    @product = $(product)
    @id = @product.data("id")
    @submit = $('#submit')
    @amount = 0
    @registerEvents()

  addItem: =>
    console.log "added item #{@id}"
    @amount++
    
  registerEvents: ->
    @product.click @addItem
  
  serialize: =>
    product_id: @id
    amount: @amount

    
$(document).ready -> 
  new Purchase()