Bootstrap form example

by JoshGough

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/adapters/backbone.bootstrap-modal.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<body>
    <div id='form' style='padding: 4px; background: #fdfdfd; border: 1px solid darkgray; margin: 8px'>
        <h4>Create Quick Estimate</h4>
        <span id='priceLabel'>Estimate Price:</span> <span id="price"></span>
        <hr/>
    </div>
</body>

CSS

h4 {
    color: #6297BC;
}

/* Date */
.bbf-date .bbf-date {
  width: 4em
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 5em;
}


/* DateTime */
.bbf-datetime select {
  width: 4em;
}


/* List */
.bbf-list .bbf-add {
  margin-top: -10px
}

.bbf-list li {
  margin-bottom: 5px
}

.bbf-list .bbf-del {
  margin-left: 4px
}


/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}

#priceLabel {
    font-weight: bold;
    margin-left: 10px;
    color: #666666;
}

#price {
    color: #999999;
}

CoffeeScript

oldBbm = Backbone.BootstrapModal
Backbone.BootstrapModal = ->
  sc = arguments[0].content.options.schema
  title = "Add Item"
  for item of sc
    if sc[item].formTitle
      title = sc[item].formTitle
      break
  arguments[0].title = title
  new oldBbm(arguments[0])
Backbone.Form.editors.List.Modal.ModalAdapter = Backbone.BootstrapModal

taskTotal = (task) ->
  return task.LaborCost
partTotal = (part) ->
  return part.Price * part.Quantity
jobTotal = (job) ->
  #return 500
  total = job.LaborCost
  total += _.reduce job.Tasks, (subTotal, task) ->
    return subTotal + taskTotal task
  , 0.0
  total += _.reduce job.Parts, (subTotal, part) ->
    return subTotal + partTotal part
  , 0.0
  return total
updatePrice = (price) ->
  $("#price").text "$" + price
    
Estimate = Backbone.Model.extend(schema:
  JobDescription:
    type: "TextArea"
    validators: ["required"]
  LaborCost:
    type: "Number"
  Tasks:
    type: "List"
    itemType: "Object"
    confirmDelete: "Are you sure?"
    subSchema:
      Title:
        formTitle: "Add Task"
        validators: ["required"]
      LaborCost:
        type: "Number"
    itemToString: (item) ->
      result = "<b>" + item.Title + "</b>"
      total = 0
      if item.LaborCost and item.LaborCost > 0
        total += item.LaborCost
      result += " = $" + total
      return result
  Parts:
    type: "List"
    itemType: "Object"
    confirmDelete: "Are you sure?"
    itemToString: (item) ->
      "<b>" + item.PartName + "</b>: " + item.Quantity + " @ " + item.Price + " = $" + Number(item.Quantity) * Number(item.Price)      
    subSchema:
      PartName:
        formTitle: "Add Part"
        type: "TextArea"
        validators: ["required"]
      Price: "Number"
      Quantity: "Number"
  JobAddresses:
    type: "List"
    itemType: "Object"
    confirmDelete: "Are you sure?"
    subSchema:
      IsActive:
        formTitle: "Add Job Address"
        title: 'Status'
        type: "Checkbox"
      LocationID:
       ...