dom-events.coffee

class APP.features.PromotionShoppingCart
  constructor: ->
    @$promotions = $('[data-promotion]')
    @$promotions.on 'change', @_calculateAndRedraw
    @_calculateAndRedraw()

  _calculateAndRedraw: =>
    promotions = @$promotions.filter(':checked:enabled').map ->
      $(this).data('promotion')

    total = promotions.get().reduce (sum, memo) ->
      sum += parseFloat(memo.price)
    , 0

    @_redraw(promotions: promotions.get(), total: total)

  _redraw: (props) ->
    component = React.createElement(PromotionShoppingCartList, props)
    ReactDOM.render(component, $('#promotion-shopping-cart').get(0))

PromotionShoppingCartList.jsx.coffee

@PromotionShoppingCartList = (props) ->
  if props.promotions.length
    promotions = props.promotions
    itemRows = $.map promotions, (promotion) ->
      ` <div className="field check-box" key={promotion.title}>
          <label>{promotion.title}</label>
          <div className="control">${promotion.price}</div>
          <div className="spacer"></div>
        </div>`

    ` <div>
        <h3>Your cart</h3>
        <div className="fields-group">
          {itemRows}
          <div className="field check-box">
            <label>Total</label>
            <div className="control">${props.total.toFixed(2)}</div>
            <div className="spacer"></div>
          </div>
        </div>
      </div>`
  else
    `<div></div>`

view.html.haml

%input{type: 'checkbox', data: { promotion: '{"title":"Featured (7 Days)", "price": 5.99 }'}
%input{type: 'checkbox', data: { promotion: '{"title":"Bump-Up (7 Days)", "price": 7.99 }'}

#promotion-shopping-cart