Bootstrap form example

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>
<div id="duoform"></div>

<div id="batmanform"></div>

CSS

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

JavaScript

var Person = Backbone.Model.extend({
        schema: { firstName: 'Text', lastName: 'Text' },
        defaults: { firstName: '', lastName: '' }
    })

    var Persons = Backbone.Collection.extend({
        model: Person
    })
    
    var Duo = Backbone.Model.extend({
        schema: {
            name: { type: 'Text' },
            hero: { type: 'NestedModel', model: Person },
            sidekick: { type: 'NestedModel', model: Person},
            team: { type: 'NestedModel', model: Persons}
        }
    })

    var batman = new Person({ firstName: 'Bruce', lastName: 'Wayne' })
    var robin = new Person({ firstName: 'Dick', lastName: 'Grayson' })
    
    var t = new Persons()
    t.add(batman)
    
    var duo = new Duo({
        name: "The Dynamic Duo", 
        hero: batman, 
        sidekick: robin,
        team: t
        })

    var duoForm = new Backbone.Form({ model: duo })
    $('#duoform').append(duoForm.render().el)

    var batmanForm = new Backbone.Form({ model: batman })