Bootstrap form example RS in prog 2 jqm1.3

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>
<!DOCTYPE html> 
<html> 
<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>        
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Quick Estimate</h1>
	</div>

	<div data-role="content">	
		<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>
</div>

</body>
</html>

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;
}

JavaScript

$(function() {    
	var oldBbm = Backbone.BootstrapModal;
    Backbone.BootstrapModal = function() {
        var sc = arguments[0].content.options.schema;
        var title = "Add Item";
        for (var item in sc) {
            if (sc[item].formTitle) {
                title = sc[item].formTitle;
                break;
            }
        }
        arguments[0].title = title;
        return new oldBbm(arguments[0]);
    }
    
    Backbone.Form.editors.List.Modal.ModalAdapter = 
        Backbone.BootstrapModal;   

    function taskTotal(task) {
        var partsCost = 0;
        if (task.Parts.length > 0) {
            partsCost = _.reduce(task.Parts,
				function(subTotal, part) {
					return subTotal + part.Price * part.Quantity;
				}, 0.0);
        }
        var total = 0;
        if (task.Labor && task.Labor > 0)
            total += task.Labor;
        if (partsCost > 0)
            total += partsCost;
		return total;
    }

    function jobTotal(tasks) {
        var total = _.reduce(tasks, 
			function(subTotal, task) {
				return subTotal + taskTotal(task);                                 
				}, 0.0);
        return total;
    }
    
    //Main model definition
    var Estimate = Backbone.Model.extend({
        schema: {
            JobDescription: { type: 'TextArea', validators: ['required'] },
            Price: { type: 'Number' },
            Tasks: { 
                type: 'List',
                itemType: 'Object',
                confirmDelete: 'Are you sure?',
				itemToString: function(item) {
					var result = "<b>" + item.Title + "</b>";
                    var partsCost = 0;
                    if (item.Parts.length > 0) {
                        result += ' -- p: ';
                    	partsCost = _.reduce(item.Parts,
                                        function(subTotal, part) {
											return subTotal + 
                                                part.Price * part.Quantity;
                    					}, 0.0);
               ...