JSFiddle - React, Tailwind, and code Playground

by Ruchi Samdariya

HTML

<table id="order-items">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr data-json="{&quot;title&quot;:&quot;Reese's&quot;,&quot;price&quot;:&quot;1.00&quot;,&quot;quantity&quot;:2}">
      <td>Reese's</td>
      <td>$1.00</td>
      <td>
        <select>
          <option>1</option>
          <option selected="selected">2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
        </select>
      </td>
      <td class="item_total">$2.00</td>
    </tr>

    <tr data-json="{&quot;title&quot;:&quot;Macbook Pro&quot;,&quot;price&quot;:&quot;999.95&quot;,&quot;quantity&quot;:1}">
      <td>Macbook Pro</td>
      <td>$999.95</td>
      <td>
        <select>
          <option selected="selected">1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
        </select>
      </td>
      <td class="item_total">$999.95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" align="right">
        Sub Total: <strong id="sub_total">$384.49</strong>
      </td>
    </tr>
  </tfoot>
</table>

CSS

@import "compass/css3";

body {
  font-family: Helvetica Neue;
  background: #f2f2f2;
}

#order-items {
  margin: 40px auto;
  width: 80%;
  border-spacing: 0;
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  
  th, td { padding: 10px; }
  
  th {
    text-align: left;
    border-bottom: 2px solid #ddd;
    background: #eee;
  }
  
  td {
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
  }
}

JavaScript

class OrderItemCollection extends Backbone.Collection
sub_total: ->
    totals = @map (m) -> m.total()
    _.inject totals, (sum, n) -> sum + n
class OrderItem extends Backbone.Model
  total: ->
    @get('quantity') * @get('price')
class OrderItemsView extends Backbone.View
  events:
    'change select': 'updateQuantity'
 initialize: (options) ->
    @sub_total = options.sub_total
    @memoizeDom()
    @listenTo(@model, 'change', @updateTotal)
 memoizeDom: ->
    @selectField = this.$el.find('select')
    @itemTotalBox = this.$el.find('.item_total')
    updateQuantity: ->
    qty = [email protected]()
    @model.set('quantity', qty)
  updateTotal: ->
    @itemTotalBox.text(accounting.formatMoney(@model.total()))
    @sub_total.text(accounting.formatMoney(@collection.sub_total()))
sub_total = $('#sub_total')    
order_items = new OrderItemCollection 
$('tbody', '#order-items').find('tr').each ->
  item = $(this).data('json')
  item.price = +item.price
order_item = new OrderItem(item)
  order_items.add(order_item)
 new OrderItemsView(el: this, model: order_item, collection: order_items, sub_total: sub_total)
sub_total.text(accounting.formatMoney(order_items.sub_total()))