rails-backbone-forms 0.11.1 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 055fbaf8a365f673eaba42bb32c713f5a0d7e510
-  data.tar.gz: 2867fd620be058089746f1698710a5bbe222dcb7
+  metadata.gz: e3fca4540b9490eebd58cf719e113313c678f9d0
+  data.tar.gz: e92315755428a19d134e791441583d0f87c420b8
 SHA512:
-  metadata.gz: 231ce5d33546d9460ca5916d6e56b20286785a356311db9583efacbe211459d1210e74372d523f84dba4610696d0e9ef6b7b2134ba9ea469ac0da5451169fccf
-  data.tar.gz: 4f15426f3a6b89abc2c940bdb9050196a418921d542735ce2c9f9a19a5744eaec52e2e9322265a78993779ed60d41312b5e266e6e7cd604e9d287d553a328858
+  metadata.gz: c55094e51fd63d02d758de064e0ccb13e737f9b37752e8518e1155a4a4e9c39af45cb1afda324f1972ee3b12ab6700d3ad2f32e449d6c94d749909ce6bd469c2
+  data.tar.gz: b7a499ac74e83c4e3b46b6ebfe6b94ca4742e0d0233143fd143b87b28ab9b4b4f555bdc3fb0dfea909a92dcd6a3d124c16b9fa71e07c620190bf489e1ef82586

data/lib/rails/backbone/forms/version.rb

@@ -1,7 +1,7 @@
 module Rails
   module Backbone
     module Forms
-      VERSION = '0.11.1'
+      VERSION = '0.12.0'
     end
   end
 end

data/vendor/assets/javascripts/backbone-forms/adapters/backbone.bootstrap-modal.js

@@ -54,32 +54,17 @@
         event.preventDefault();
 
         this.trigger('cancel');
-
-        if (this.options.content && this.options.content.trigger) {
-          this.options.content.trigger('cancel', this);
-        }
       },
       'click .cancel': function(event) {
         event.preventDefault();
 
         this.trigger('cancel');
-
-        if (this.options.content && this.options.content.trigger) {
-          this.options.content.trigger('cancel', this);
-        }
       },
       'click .ok': function(event) {
         event.preventDefault();
 
         this.trigger('ok');
-
-        if (this.options.content && this.options.content.trigger) {
-          this.options.content.trigger('ok', this);
-        }
-
-        if (this.options.okCloses) {
-          this.close();
-        }
+        this.close();
       }
     },
 
@@ -102,8 +87,6 @@
       this.options = _.extend({
         title: null,
         okText: 'OK',
-        focusOk: true,
-        okCloses: true,
         cancelText: 'Cancel',
         allowCancel: true,
         escape: true,
@@ -129,8 +112,7 @@
 
       //Insert the main content if it's a view
       if (content.$el) {
-        content.render();
-        $el.find('.modal-body').html(content.$el);
+        $el.find('.modal-body').html(content.render().$el);
       }
 
       if (options.animate) $el.addClass('fade');
@@ -152,20 +134,14 @@
           $el = this.$el;
 
       //Create it
-      $el.modal(_.extend({
+      $el.modal({
         keyboard: this.options.allowCancel,
         backdrop: this.options.allowCancel ? true : 'static'
-      }, this.options.modalOptions));
+      });
 
       //Focus OK button
       $el.one('shown', function() {
-        if (self.options.focusOk) {
-          $el.find('.btn.ok').focus();
-        }
-
-        if (self.options.content && self.options.content.trigger) {
-          self.options.content.trigger('shown', self);
-        }
+        $el.find('.btn.ok').focus();
 
         self.trigger('shown');
       });
@@ -173,27 +149,19 @@
       //Adjust the modal and backdrop z-index; for dealing with multiple modals
       var numModals = Modal.count,
           $backdrop = $('.modal-backdrop:eq('+numModals+')'),
-          backdropIndex = parseInt($backdrop.css('z-index'),10),
-          elIndex = parseInt($backdrop.css('z-index'), 10);
+          backdropIndex = $backdrop.css('z-index'),
+          elIndex = $backdrop.css('z-index');
 
       $backdrop.css('z-index', backdropIndex + numModals);
       this.$el.css('z-index', elIndex + numModals);
 
       if (this.options.allowCancel) {
         $backdrop.one('click', function() {
-          if (self.options.content && self.options.content.trigger) {
-            self.options.content.trigger('cancel', self);
-          }
-
           self.trigger('cancel');
         });
         
         $(document).one('keyup.dismiss.modal', function (e) {
           e.which == 27 && self.trigger('cancel');
-
-          if (self.options.content && self.options.content.trigger) {
-            e.which == 27 && self.options.content.trigger('shown', self);
-          }
         });
       }
 
@@ -224,22 +192,14 @@
         return;
       }
 
-      $el.one('hidden', function onHidden(e) {
-        // Ignore events propagated from interior objects, like bootstrap tooltips
-        if(e.target !== e.currentTarget){
-          return $el.one('hidden', onHidden);
-        }
-        self.remove();
+      $el.modal('hide');
 
-        if (self.options.content && self.options.content.trigger) {
-          self.options.content.trigger('hidden', self);
-        }
+      $el.one('hidden', function() {
+        self.remove();
 
         self.trigger('hidden');
       });
 
-      $el.modal('hide');
-
       Modal.count--;
     },
 

data/vendor/assets/javascripts/backbone-forms/adapters/backbone.bootstrap-modal.min.js

@@ -1 +1 @@
-(function(e,t,n){var r=t.templateSettings;t.templateSettings={interpolate:/\{\{(.+?)\}\}/g,evaluate:/<%([\s\S]+?)%>/g};var i=t.template('    <% if (title) { %>      <div class="modal-header">        <% if (allowCancel) { %>          <a class="close">×</a>        <% } %>        <h3>{{title}}</h3>      </div>    <% } %>    <div class="modal-body">{{content}}</div>    <div class="modal-footer">      <% if (allowCancel) { %>        <% if (cancelText) { %>          <a href="#" class="btn cancel">{{cancelText}}</a>        <% } %>      <% } %>      <a href="#" class="btn ok btn-primary">{{okText}}</a>    </div>  ');t.templateSettings=r;var s=n.View.extend({className:"modal",events:{"click .close":function(e){e.preventDefault(),this.trigger("cancel"),this.options.content&&this.options.content.trigger&&this.options.content.trigger("cancel",this)},"click .cancel":function(e){e.preventDefault(),this.trigger("cancel"),this.options.content&&this.options.content.trigger&&this.options.content.trigger("cancel",this)},"click .ok":function(e){e.preventDefault(),this.trigger("ok"),this.options.content&&this.options.content.trigger&&this.options.content.trigger("ok",this),this.options.okCloses&&this.close()}},initialize:function(e){this.options=t.extend({title:null,okText:"OK",focusOk:!0,okCloses:!0,cancelText:"Cancel",allowCancel:!0,escape:!0,animate:!1,template:i},e)},render:function(){var e=this.$el,t=this.options,n=t.content;e.html(t.template(t));var r=this.$content=e.find(".modal-body");return n.$el&&(n.render(),e.find(".modal-body").html(n.$el)),t.animate&&e.addClass("fade"),this.isRendered=!0,this},open:function(n){this.isRendered||this.render();var r=this,i=this.$el;i.modal(t.extend({keyboard:this.options.allowCancel,backdrop:this.options.allowCancel?!0:"static"},this.options.modalOptions)),i.one("shown",function(){r.options.focusOk&&i.find(".btn.ok").focus(),r.options.content&&r.options.content.trigger&&r.options.content.trigger("shown",r),r.trigger("shown")});var o=s.count,u=e(".modal-backdrop:eq("+o+")"),a=parseInt(u.css("z-index"),10),f=parseInt(u.css("z-index"),10);return u.css("z-index",a+o),this.$el.css("z-index",f+o),this.options.allowCancel&&(u.one("click",function(){r.options.content&&r.options.content.trigger&&r.options.content.trigger("cancel",r),r.trigger("cancel")}),e(document).one("keyup.dismiss.modal",function(e){e.which==27&&r.trigger("cancel"),r.options.content&&r.options.content.trigger&&e.which==27&&r.options.content.trigger("shown",r)})),this.on("cancel",function(){r.close()}),s.count++,n&&r.on("ok",n),this},close:function(){var e=this,t=this.$el;if(this._preventClose){this._preventClose=!1;return}t.one("hidden",function n(r){if(r.target!==r.currentTarget)return t.one("hidden",n);e.remove(),e.options.content&&e.options.content.trigger&&e.options.content.trigger("hidden",e),e.trigger("hidden")}),t.modal("hide"),s.count--},preventClose:function(){this._preventClose=!0}},{count:0});typeof require=="function"&&typeof module!="undefined"&&exports&&(module.exports=s);if(typeof define=="function"&&define.amd)return define(function(){n.BootstrapModal=s});n.BootstrapModal=s})(jQuery,_,Backbone)
+(function(e,t,n){var r=t.templateSettings;t.templateSettings={interpolate:/\{\{(.+?)\}\}/g,evaluate:/<%([\s\S]+?)%>/g};var i=t.template('    <% if (title) { %>      <div class="modal-header">        <% if (allowCancel) { %>          <a class="close">×</a>        <% } %>        <h3>{{title}}</h3>      </div>    <% } %>    <div class="modal-body">{{content}}</div>    <div class="modal-footer">      <% if (allowCancel) { %>        <% if (cancelText) { %>          <a href="#" class="btn cancel">{{cancelText}}</a>        <% } %>      <% } %>      <a href="#" class="btn ok btn-primary">{{okText}}</a>    </div>  ');t.templateSettings=r;var s=n.View.extend({className:"modal",events:{"click .close":function(e){e.preventDefault(),this.trigger("cancel")},"click .cancel":function(e){e.preventDefault(),this.trigger("cancel")},"click .ok":function(e){e.preventDefault(),this.trigger("ok"),this.close()}},initialize:function(e){this.options=t.extend({title:null,okText:"OK",cancelText:"Cancel",allowCancel:!0,escape:!0,animate:!1,template:i},e)},render:function(){var e=this.$el,t=this.options,n=t.content;e.html(t.template(t));var r=this.$content=e.find(".modal-body");return n.$el&&e.find(".modal-body").html(n.render().$el),t.animate&&e.addClass("fade"),this.isRendered=!0,this},open:function(t){this.isRendered||this.render();var n=this,r=this.$el;r.modal({keyboard:this.options.allowCancel,backdrop:this.options.allowCancel?!0:"static"}),r.one("shown",function(){r.find(".btn.ok").focus(),n.trigger("shown")});var i=s.count,o=e(".modal-backdrop:eq("+i+")"),u=o.css("z-index"),a=o.css("z-index");return o.css("z-index",u+i),this.$el.css("z-index",a+i),this.options.allowCancel&&(o.one("click",function(){n.trigger("cancel")}),e(document).one("keyup.dismiss.modal",function(e){e.which==27&&n.trigger("cancel")})),this.on("cancel",function(){n.close()}),s.count++,t&&n.on("ok",t),this},close:function(){var e=this,t=this.$el;if(this._preventClose){this._preventClose=!1;return}t.modal("hide"),t.one("hidden",function(){e.remove(),e.trigger("hidden")}),s.count--},preventClose:function(){this._preventClose=!0}},{count:0});typeof require=="function"&&typeof module!="undefined"&&exports&&(module.exports=s);if(typeof define=="function"&&define.amd)return define(function(){n.BootstrapModal=s});n.BootstrapModal=s})(jQuery,_,Backbone)

data/vendor/assets/javascripts/backbone-forms/backbone-forms.js

@@ -1,5 +1,5 @@
 /**
- * Backbone Forms v0.11.0
+ * Backbone Forms v0.12.0
  *
  * Copyright (c) 2013 Charles Davison, Pow Media Ltd
  *
@@ -30,594 +30,446 @@
 //FORM
 //==================================================================================================
 
-var Form = (function() {
-
-  return Backbone.View.extend({
-
-    hasFocus: false,
-
-    /**
-     * Creates a new form
-     *
-     * @param {Object} options
-     * @param {Model} [options.model]                 Model the form relates to. Required if options.data is not set
-     * @param {Object} [options.data]                 Date to populate the form. Required if options.model is not set
-     * @param {String[]} [options.fields]             Fields to include in the form, in order
-     * @param {String[]|Object[]} [options.fieldsets] How to divide the fields up by section. E.g. [{ legend: 'Title', fields: ['field1', 'field2'] }]
-     * @param {String} [options.idPrefix]             Prefix for editor IDs. By default, the model's CID is used.
-     * @param {String} [options.template]             Form template key/name
-     * @param {String} [options.fieldsetTemplate]     Fieldset template key/name
-     * @param {String} [options.fieldTemplate]        Field template key/name
-     *
-     * @return {Form}
-     */
-    initialize: function(options) {
-      //Check templates have been loaded
-      if (!Form.templates.form) throw new Error('Templates not loaded');
-
-      //Get the schema
-      this.schema = (function() {
-        if (options.schema) return options.schema;
-
-        var model = options.model;
-        if (!model) throw new Error('Could not find schema');
-
-        if (_.isFunction(model.schema)) return model.schema();
-
-        return model.schema;
-      })();
-
-      //Option defaults
-      options = _.extend({
-        template: 'form',
-        fieldsetTemplate: 'fieldset',
-        fieldTemplate: 'field'
-      }, options);
-
-      //Determine fieldsets
-      if (!options.fieldsets) {
-        var fields = options.fields || _.keys(this.schema);
-
-        options.fieldsets = [{ fields: fields }];
-      }
+var Form = Backbone.View.extend({
 
-      //Store main attributes
-      this.options = options;
-      this.model = options.model;
-      this.data = options.data;
-      this.fields = {};
-    },
+  /**
+   * Constructor
+   * 
+   * @param {Object} [options.schema]
+   * @param {Backbone.Model} [options.model]
+   * @param {Object} [options.data]
+   * @param {String[]|Object[]} [options.fieldsets]
+   * @param {String[]} [options.fields]
+   * @param {String} [options.idPrefix]
+   * @param {Form.Field} [options.Field]
+   * @param {Form.Fieldset} [options.Fieldset]
+   * @param {Function} [options.template]
+   */
+  initialize: function(options) {
+    var self = this;
 
-    /**
-     * Renders the form and all fields
-     */
-    render: function() {
-      var self = this,
-          options = this.options,
-          template = Form.templates[options.template];
+    options = options || {};
 
-      //Create el from template
-      var $form = Form.helpers.parseHTML(template({
-        fieldsets: '<b class="bbf-tmp"></b>'
-      }));
+    //Find the schema to use
+    var schema = this.schema = (function() {
+      //Prefer schema from options
+      if (options.schema) return _.result(options, 'schema');
 
-      //Render fieldsets
-      var $fieldsetContainer = $('.bbf-tmp', $form);
+      //Then schema on model
+      var model = options.model;
+      if (model && model.schema) {
+        return (_.isFunction(model.schema)) ? model.schema() : model.schema;
+      }
 
-      _.each(options.fieldsets, function(fieldset) {
-        $fieldsetContainer.append(self.renderFieldset(fieldset));
-      });
+      //Then built-in schema
+      if (self.schema) {
+        return (_.isFunction(self.schema)) ? self.schema() : self.schema;
+      }
 
-      $fieldsetContainer.children().unwrap();
+      //Fallback to empty schema
+      return {};
+    })();
 
-      //Set the template contents as the main element; removes the wrapper element
-      this.setElement($form);
+    //Store important data
+    _.extend(this, _.pick(options, 'model', 'data', 'idPrefix'));
 
-      if (this.hasFocus) this.trigger('blur', this);
+    //Override defaults
+    var constructor = this.constructor;
+    this.template = options.template || constructor.template;
+    this.Fieldset = options.Fieldset || constructor.Fieldset;
+    this.Field = options.Field || constructor.Field;
+    this.NestedField = options.NestedField || constructor.NestedField;
 
-      return this;
-    },
+    //Check which fields will be included (defaults to all)
+    var selectedFields = this.selectedFields = options.fields || _.keys(schema);
 
-    /**
-     * Renders a fieldset and the fields within it
-     *
-     * Valid fieldset definitions:
-     * ['field1', 'field2']
-     * { legend: 'Some Fieldset', fields: ['field1', 'field2'] }
-     *
-     * @param {Object|Array} fieldset     A fieldset definition
-     *
-     * @return {jQuery}                   The fieldset DOM element
-     */
-    renderFieldset: function(fieldset) {
-      var self = this,
-          template = Form.templates[this.options.fieldsetTemplate],
-          schema = this.schema,
-          getNested = Form.helpers.getNested;
-
-      //Normalise to object
-      if (_.isArray(fieldset)) {
-        fieldset = { fields: fieldset };
-      }
+    //Create fields
+    var fields = this.fields = {};
 
-      //Concatenating HTML as strings won't work so we need to insert field elements into a placeholder
-      var $fieldset = Form.helpers.parseHTML(template(_.extend({}, fieldset, {
-        legend: '<b class="bbf-tmp-legend"></b>',
-        fields: '<b class="bbf-tmp-fields"></b>'
-      })));
+    _.each(selectedFields, function(key) {
+      var fieldSchema = schema[key];
+      fields[key] = this.createField(key, fieldSchema);
+    }, this);
 
-      //Set legend
-      if (fieldset.legend) {
-        $fieldset.find('.bbf-tmp-legend').replaceWith(fieldset.legend);
-      }
-      //or remove the containing tag if there isn't a legend
-      else {
-        $fieldset.find('.bbf-tmp-legend').parent().remove();
-      }
+    //Create fieldsets
+    var fieldsetSchema = options.fieldsets || [selectedFields],
+        fieldsets = this.fieldsets = [];
+
+    _.each(fieldsetSchema, function(itemSchema) {
+      this.fieldsets.push(this.createFieldset(itemSchema));
+    }, this);
+  },
+
+  /**
+   * Creates a Fieldset instance
+   *
+   * @param {String[]|Object[]} schema       Fieldset schema
+   *
+   * @return {Form.Fieldset}
+   */
+  createFieldset: function(schema) {
+    var options = {
+      schema: schema,
+      fields: this.fields
+    };
+
+    return new this.Fieldset(options);
+  },
 
-      var $fieldsContainer = $('.bbf-tmp-fields', $fieldset);
+  /**
+   * Creates a Field instance
+   *
+   * @param {String} key
+   * @param {Object} schema       Field schema
+   *
+   * @return {Form.Field}
+   */
+  createField: function(key, schema) {
+    var options = {
+      form: this,
+      key: key,
+      schema: schema,
+      idPrefix: this.idPrefix
+    };
 
-      //Render fields
-      _.each(fieldset.fields, function(key) {
-        //Get the field schema
-        var itemSchema = (function() {
-          //Return a normal key or path key
-          if (schema[key]) return schema[key];
+    if (this.model) {
+      options.model = this.model;
+    } else if (this.data) {
+      options.value = this.data[key];
+    } else {
+      options.value = null;
+    }
 
-          //Return a nested schema, i.e. Object
-          var path = key.replace(/\./g, '.subSchema.');
-          return getNested(schema, path);
-        })();
+    var field = new this.Field(options);
 
-        if (!itemSchema) throw "Field '"+key+"' not found in schema";
+    this.listenTo(field.editor, 'all', this.handleEditorEvent);
 
-        //Create the field
-        var field = self.fields[key] = self.createField(key, itemSchema);
+    return field;
+  },
 
-        //Render the fields with editors, apart from Hidden fields
-        var fieldEl = field.render().el;
+  /**
+   * Callback for when an editor event is fired.
+   * Re-triggers events on the form as key:event and triggers additional form-level events
+   *
+   * @param {String} event
+   * @param {Editor} editor
+   */
+  handleEditorEvent: function(event, editor) {
+    //Re-trigger editor events on the form
+    var formEvent = editor.key+':'+event;
 
-        field.editor.on('all', function(event) {
-          // args = ["change", editor]
-          var args = _.toArray(arguments);
-          args[0] = key + ':' + event;
-          args.splice(1, 0, this);
-          // args = ["key:change", this=form, editor]
+    this.trigger.call(this, formEvent, this, editor);
 
-          this.trigger.apply(this, args);
-        }, self);
+    //Trigger additional events
+    switch (event) {
+      case 'change':
+        this.trigger('change', this);
+        break;
 
-        field.editor.on('change', function() {
-          this.trigger('change', self);
-        }, self);
+      case 'focus':
+        if (!this.hasFocus) this.trigger('focus', this);
+        break;
 
-        field.editor.on('focus', function() {
-          if (this.hasFocus) return;
-          this.trigger('focus', this);
-        }, self);
-        field.editor.on('blur', function() {
-          if (!this.hasFocus) return;
+      case 'blur':
+        if (this.hasFocus) {
+          //TODO: Is the timeout etc needed?
           var self = this;
           setTimeout(function() {
-            if (_.find(self.fields, function(field) { return field.editor.hasFocus; })) return;
-            self.trigger('blur', self);
-          }, 0);
-        }, self);
+            var focusedField = _.find(self.fields, function(field) {
+              return field.editor.hasFocus;
+            });
 
-        if (itemSchema.type !== 'Hidden') {
-          $fieldsContainer.append(fieldEl);
+            if (!focusedField) self.trigger('blur', self);
+          }, 0);
         }
-      });
+        break;
+    }
+  },
 
-      $fieldsContainer = $fieldsContainer.children().unwrap();
+  render: function() {
+    var self = this,
+        fields = this.fields;
 
-      return $fieldset;
-    },
+    //Render form
+    var $form = $($.trim(this.template(_.result(this, 'templateData'))));
 
-    /**
-     * Renders a field and returns it
-     *
-     * @param {String} key            The key for the field in the form schema
-     * @param {Object} schema         Field schema
-     *
-     * @return {Field}                The field view
-     */
-    createField: function(key, schema) {
-      schema.template = schema.template || this.options.fieldTemplate;
-
-      var options = {
-        form: this,
-        key: key,
-        schema: schema,
-        idPrefix: this.options.idPrefix,
-        template: this.options.fieldTemplate
-      };
+    //Render standalone editors
+    $form.find('[data-editors]').add($form).each(function(i, el) {
+      var $container = $(el),
+          selection = $container.attr('data-editors');
 
-      if (this.model) {
-        options.model = this.model;
-      } else if (this.data) {
-        options.value = this.data[key];
-      } else {
-        options.value = null;
-      }
+      if (_.isUndefined(selection)) return;
 
-      return new Form.Field(options);
-    },
+      //Work out which fields to include
+      var keys = (selection == '*')
+        ? self.selectedFields || _.keys(fields)
+        : selection.split(',');
 
-    /**
-     * Validate the data
-     *
-     * @return {Object} Validation errors
-     */
-    validate: function() {
-      var self = this,
-          fields = this.fields,
-          model = this.model,
-          errors = {};
-
-      //Collect errors from schema validation
-      _.each(fields, function(field) {
-        var error = field.validate();
-        if (error) {
-          errors[field.key] = error;
-        }
+      //Add them
+      _.each(keys, function(key) {
+        var field = fields[key];
+
+        $container.append(field.editor.render().el);
       });
+    });
 
-      //Get errors from default Backbone model validator
-      if (model && model.validate) {
-        var modelErrors = model.validate(this.getValue());
+    //Render standalone fields
+    $form.find('[data-fields]').add($form).each(function(i, el) {
+      var $container = $(el),
+          selection = $container.attr('data-fields');
 
-        if (modelErrors) {
-          var isDictionary = _.isObject(modelErrors) && !_.isArray(modelErrors);
+      if (_.isUndefined(selection)) return;
 
-          //If errors are not in object form then just store on the error object
-          if (!isDictionary) {
-            errors._others = errors._others || [];
-            errors._others.push(modelErrors);
-          }
+      //Work out which fields to include
+      var keys = (selection == '*')
+        ? self.selectedFields || _.keys(fields)
+        : selection.split(',');
 
-          //Merge programmatic errors (requires model.validate() to return an object e.g. { fieldKey: 'error' })
-          if (isDictionary) {
-            _.each(modelErrors, function(val, key) {
-              //Set error on field if there isn't one already
-              if (self.fields[key] && !errors[key]) {
-                self.fields[key].setError(val);
-                errors[key] = val;
-              }
-
-              else {
-                //Otherwise add to '_others' key
-                errors._others = errors._others || [];
-                var tmpErr = {};
-                tmpErr[key] = val;
-                errors._others.push(tmpErr);
-              }
-            });
-          }
-        }
-      }
+      //Add them
+      _.each(keys, function(key) {
+        var field = fields[key];
 
-      return _.isEmpty(errors) ? null : errors;
-    },
+        $container.append(field.render().el);
+      });
+    });
 
-    /**
-     * Update the model with all latest values.
-     *
-     * @param {Object} [options]  Options to pass to Model#set (e.g. { silent: true })
-     *
-     * @return {Object}  Validation errors
-     */
-    commit: function(options) {
-      //Validate
-      var errors = this.validate();
-      if (errors) return errors;
-
-      //Commit
-      var modelError;
-
-      var setOptions = _.extend({
-        error: function(model, e) {
-          modelError = e;
-        }
-      }, options);
+    //Render fieldsets
+    $form.find('[data-fieldsets]').add($form).each(function(i, el) {
+      var $container = $(el),
+          selection = $container.attr('data-fieldsets');
 
-      this.model.set(this.getValue(), setOptions);
-      
-      if (modelError) return modelError;
-    },
+      if (_.isUndefined(selection)) return;
 
-    /**
-     * Get all the field values as an object.
-     * Use this method when passing data instead of objects
-     *
-     * @param {String} [key]    Specific field value to get
-     */
-    getValue: function(key) {
-      //Return only given key if specified
-      if (key) return this.fields[key].getValue();
-
-      //Otherwise return entire form
-      var values = {};
-      _.each(this.fields, function(field) {
-        values[field.key] = field.getValue();
+      _.each(self.fieldsets, function(fieldset) {
+        $container.append(fieldset.render().el);
       });
+    });
 
-      return values;
-    },
-
-    /**
-     * Update field values, referenced by key
-     * @param {Object|String} key     New values to set, or property to set
-     * @param val                     Value to set
-     */
-    setValue: function(prop, val) {
-      var data = {};
-      if (typeof prop === 'string') {
-        data[prop] = val;
-      } else {
-        data = prop;
-      }
-
-      var key;
-      for (key in this.schema) {
-        if (data[key] !== undefined) {
-          this.fields[key].setValue(data[key]);
-        }
-      }
-    },
+    //Set the main element
+    this.setElement($form);
+    
+    //Set class
+    $form.addClass(this.className);
 
-    focus: function() {
-      if (this.hasFocus) return;
+    return this;
+  },
 
-      var fieldset = this.options.fieldsets[0];
-      if (fieldset) {
-        var field;
-        if (_.isArray(fieldset)) {
-          field = fieldset[0];
-        }
-        else {
-          field = fieldset.fields[0];
-        }
-        if (field) {
-          this.fields[field].editor.focus();
-        }
+  /**
+   * Validate the data
+   *
+   * @return {Object}       Validation errors
+   */
+  validate: function() {
+    var self = this,
+        fields = this.fields,
+        model = this.model,
+        errors = {};
+
+    //Collect errors from schema validation
+    _.each(fields, function(field) {
+      var error = field.validate();
+      if (error) {
+        errors[field.key] = error;
       }
-    },
+    });
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    //Get errors from default Backbone model validator
+    if (model && model.validate) {
+      var modelErrors = model.validate(this.getValue());
 
-      var focusedField = _.find(this.fields, function(field) { return field.editor.hasFocus; });
+      if (modelErrors) {
+        var isDictionary = _.isObject(modelErrors) && !_.isArray(modelErrors);
 
-      if (focusedField) focusedField.editor.blur();
-    },
+        //If errors are not in object form then just store on the error object
+        if (!isDictionary) {
+          errors._others = errors._others || [];
+          errors._others.push(modelErrors);
+        }
 
-    /**
-     * Override default remove function in order to remove embedded views
-     */
-    remove: function() {
-      var fields = this.fields;
+        //Merge programmatic errors (requires model.validate() to return an object e.g. { fieldKey: 'error' })
+        if (isDictionary) {
+          _.each(modelErrors, function(val, key) {
+            //Set error on field if there isn't one already
+            if (fields[key] && !errors[key]) {
+              fields[key].setError(val);
+              errors[key] = val;
+            }
 
-      for (var key in fields) {
-        fields[key].remove();
+            else {
+              //Otherwise add to '_others' key
+              errors._others = errors._others || [];
+              var tmpErr = {};
+              tmpErr[key] = val;
+              errors._others.push(tmpErr);
+            }
+          });
+        }
       }
+    }
 
-      Backbone.View.prototype.remove.call(this);
-    },
-
-    trigger: function(event) {
-      if (event === 'focus') {
-        this.hasFocus = true;
-      }
-      else if (event === 'blur') {
-        this.hasFocus = false;
-      }
+    return _.isEmpty(errors) ? null : errors;
+  },
 
-      return Backbone.View.prototype.trigger.apply(this, arguments);
-    }
-  });
+  /**
+   * Update the model with all latest values.
+   *
+   * @param {Object} [options]  Options to pass to Model#set (e.g. { silent: true })
+   *
+   * @return {Object}  Validation errors
+   */
+  commit: function(options) {
+    //Validate
+    var errors = this.validate();
+    if (errors) return errors;
 
-})();
+    //Commit
+    var modelError;
 
+    var setOptions = _.extend({
+      error: function(model, e) {
+        modelError = e;
+      }
+    }, options);
 
-//==================================================================================================
-//HELPERS
-//==================================================================================================
+    this.model.set(this.getValue(), setOptions);
+    
+    if (modelError) return modelError;
+  },
 
-Form.helpers = (function() {
+  /**
+   * Get all the field values as an object.
+   * Use this method when passing data instead of objects
+   *
+   * @param {String} [key]    Specific field value to get
+   */
+  getValue: function(key) {
+    //Return only given key if specified
+    if (key) return this.fields[key].getValue();
+
+    //Otherwise return entire form
+    var values = {};
+    _.each(this.fields, function(field) {
+      values[field.key] = field.getValue();
+    });
 
-  var helpers = {};
+    return values;
+  },
 
   /**
-   * Gets a nested attribute using a path e.g. 'user.name'
+   * Update field values, referenced by key
    *
-   * @param {Object} obj    Object to fetch attribute from
-   * @param {String} path   Attribute path e.g. 'user.name'
-   * @return {Mixed}
-   * @api private
+   * @param {Object|String} key     New values to set, or property to set
+   * @param val                     Value to set
    */
-  helpers.getNested = function(obj, path) {
-    var fields = path.split(".");
-    var result = obj;
-    for (var i = 0, n = fields.length; i < n; i++) {
-      result = result[fields[i]];
+  setValue: function(prop, val) {
+    var data = {};
+    if (typeof prop === 'string') {
+      data[prop] = val;
+    } else {
+      data = prop;
     }
-    return result;
-  };
-  
+
+    var key;
+    for (key in this.schema) {
+      if (data[key] !== undefined) {
+        this.fields[key].setValue(data[key]);
+      }
+    }
+  },
+
   /**
-   * This function is used to transform the key from a schema into the title used in a label.
-   * (If a specific title is provided it will be used instead).
-   * 
-   * By default this converts a camelCase string into words, i.e. Camel Case
-   * If you have a different naming convention for schema keys, replace this function.
-   * 
-   * @param {String}  Key
-   * @return {String} Title
+   * Returns the editor for a given field key
+   *
+   * @param {String} key
+   *
+   * @return {Editor}
    */
-  helpers.keyToTitle = function(str) {
-    //Add spaces
-    str = str.replace(/([A-Z])/g, ' $1');
+  getEditor: function(key) {
+    var field = this.fields[key];
+    if (!field) throw 'Field not found: '+key;
 
-    //Uppercase first character
-    str = str.replace(/^./, function(str) { return str.toUpperCase(); });
-
-    return str;
-  };
+    return field.editor;
+  },
 
   /**
-   * Helper to compile a template with the {{mustache}} style tags. Template settings are reset
-   * to user's settings when done to avoid conflicts.
-   * @param {String}    Template string
-   * @return {Template} Compiled template
+   * Gives the first editor in the form focus
    */
-  helpers.compileTemplate = function(str) {
-      //Store user's template options
-      var _interpolateBackup = _.templateSettings.interpolate;
-
-      //Set custom template settings
-      _.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
+  focus: function() {
+    if (this.hasFocus) return;
 
-      var template = _.template(str);
+    //Get the first field
+    var fieldset = this.fieldsets[0],
+        field = fieldset.getFieldAt(0);
 
-      //Reset to users' template settings
-      _.templateSettings.interpolate = _interpolateBackup;
+    if (!field) return;
 
-      return template;
-  };
+    //Set focus
+    field.editor.focus();
+  },
 
   /**
-   * Helper to create a template with the {{mustache}} style tags.
-   * If context is passed in, the template will be evaluated.
-   * @param {String}             Template string
-   * @param {Object}             Optional; values to replace in template
-   * @return {Template|String}   Compiled template or the evaluated string
+   * Removes focus from the currently focused editor
    */
-  helpers.createTemplate = function(str, context) {
-    var template = helpers.compileTemplate($.trim(str));
-    
-    if (!context) {
-      return template;
-    } else {
-      return template(context);
-    }
-  };
-  
+  blur: function() {
+    if (!this.hasFocus) return;
 
-  /**
-   * Sets the template compiler to the given function
-   * @param {Function} Template compiler function
-   */
-  helpers.setTemplateCompiler = function(compiler) {
-    helpers.compileTemplate = compiler;
-  };
-  
-  
-  /**
-   * Sets the templates to be used.
-   * 
-   * If the templates passed in are strings, they will be compiled, expecting Mustache style tags,
-   * i.e. <div>{{varName}}</div>
-   *
-   * You can also pass in previously compiled Underscore templates, in which case you can use any style
-   * tags.
-   * 
-   * @param {Object} templates
-   * @param {Object} classNames
-   */
-  helpers.setTemplates = function(templates, classNames) {
-    var createTemplate = helpers.createTemplate;
-    
-    Form.templates = Form.templates || {};
-    Form.classNames = Form.classNames || {};
-    
-    //Set templates, compiling them if necessary
-    _.each(templates, function(template, key, index) {
-      if (_.isString(template)) template = createTemplate(template);
-      
-      Form.templates[key] = template;
+    var focusedField = _.find(this.fields, function(field) {
+      return field.editor.hasFocus;
     });
-    
-    //Set class names
-    _.extend(Form.classNames, classNames);
-  };
-  
-  
-  /**
-   * Return the editor constructor for a given schema 'type'.
-   * Accepts strings for the default editors, or the reference to the constructor function
-   * for custom editors
-   * 
-   * @param {String|Function} The schema type e.g. 'Text', 'Select', or the editor constructor e.g. editors.Date
-   * @param {Object}          Options to pass to editor, including required 'key', 'schema'
-   * @return {Mixed}          An instance of the mapped editor
-   */
-  helpers.createEditor = function(schemaType, options) {
-    var constructorFn;
 
-    if (_.isString(schemaType)) {
-      constructorFn = Form.editors[schemaType];
-    } else {
-      constructorFn = schemaType;
-    }
+    if (focusedField) focusedField.editor.blur();
+  },
 
-    return new constructorFn(options);
-  };
-  
-  
   /**
-   * Returns a validation function based on the type defined in the schema
+   * Manages the hasFocus property
    *
-   * @param {RegExp|String|Function} validator
-   * @return {Function}
+   * @param {String} event
    */
-  helpers.getValidator = function(validator) {
-    var validators = Form.validators;
-
-    //Convert regular expressions to validators
-    if (_.isRegExp(validator)) {
-      return validators.regexp({ regexp: validator });
-    }
-    
-    //Use a built-in validator if given a string
-    if (_.isString(validator)) {
-      if (!validators[validator]) throw new Error('Validator "'+validator+'" not found');
-      
-      return validators[validator]();
+  trigger: function(event) {
+    if (event === 'focus') {
+      this.hasFocus = true;
     }
-
-    //Functions can be used directly
-    if (_.isFunction(validator)) return validator;
-
-    //Use a customised built-in validator if given an object
-    if (_.isObject(validator) && validator.type) {
-      var config = validator;
-      
-      return validators[config.type](config);
+    else if (event === 'blur') {
+      this.hasFocus = false;
     }
-    
-    //Unkown validator type
-    throw new Error('Invalid validator: ' + validator);
-  };
 
+    return Backbone.View.prototype.trigger.apply(this, arguments);
+  },
 
   /**
-   * Given an HTML string, return a jQuery-wrapped array of DOM nodes.
+   * Override default remove function in order to remove embedded views
    *
-   * @param {String} html
-   * @return {Object}
+   * TODO: If editors are included directly with data-editors="x", they need to be removed
+   * May be best to use XView to manage adding/removing views
    */
-  helpers.parseHTML = function(html) { 
-    if ($.parseHTML !== undefined) {
-      return $($.parseHTML(html));
-    }
-    return $(html);
-  };
+  remove: function() {
+    _.each(this.fieldsets, function(fieldset) {
+      fieldset.remove();
+    });
+
+    _.each(this.fields, function(field) {
+      field.remove();
+    });
 
+    Backbone.View.prototype.remove.call(this);
+  }
 
-  return helpers;
+}, {
 
-})();
+  //STATICS
+  template: _.template('\
+    <form data-fieldsets></form>\
+  ', null, this.templateSettings),
+
+  templateSettings: {
+    evaluate: /<%([\s\S]+?)%>/g, 
+    interpolate: /<%=([\s\S]+?)%>/g, 
+    escape: /<%-([\s\S]+?)%>/g
+  },
+
+  editors: {}
+
+});
 
   
 //==================================================================================================
@@ -633,7 +485,7 @@ Form.validators = (function() {
     regexp: 'Invalid',
     email: 'Invalid email address',
     url: 'Invalid URL',
-    match: 'Must match field "{{field}}"'
+    match: _.template('Must match field "<%= field %>"', null, Form.templateSettings)
   };
   
   validators.required = function(options) {
@@ -647,7 +499,7 @@ Form.validators = (function() {
       
       var err = {
         type: options.type,
-        message: Form.helpers.createTemplate(options.message, options)
+        message: _.isFunction(options.message) ? options.message(options) : options.message
       };
       
       if (value === null || value === undefined || value === false || value === '') return err;
@@ -667,7 +519,7 @@ Form.validators = (function() {
       
       var err = {
         type: options.type,
-        message: Form.helpers.createTemplate(options.message, options)
+        message: _.isFunction(options.message) ? options.message(options) : options.message
       };
       
       //Don't check empty values (add a 'required' validator for this)
@@ -710,7 +562,7 @@ Form.validators = (function() {
       
       var err = {
         type: options.type,
-        message: Form.helpers.createTemplate(options.message, options)
+        message: _.isFunction(options.message) ? options.message(options) : options.message
       };
       
       //Don't check empty values (add a 'required' validator for this)
@@ -727,1639 +579,1807 @@ Form.validators = (function() {
 
 
 //==================================================================================================
-//FIELD
+//FIELDSET
 //==================================================================================================
 
-Form.Field = (function() {
-
-  var helpers = Form.helpers,
-      templates = Form.templates;
-
-  return Backbone.View.extend({
-
-    /**
-     * @param {Object}  Options
-     *      Required:
-     *          key     {String} : The model attribute key
-     *      Optional:
-     *          schema  {Object} : Schema for the field
-     *          value       {Mixed} : Pass value when not using a model. Use getValue() to get out value
-     *          model       {Backbone.Model} : Use instead of value, and use commit().
-     *          idPrefix    {String} : Prefix to add to the editor DOM element's ID
-     */
-    /**
-     * Creates a new field
-     *
-     * @param {Object} options
-     * @param {Object} [options.schema]     Field schema. Defaults to { type: 'Text' }
-     * @param {Model} [options.model]       Model the field relates to. Required if options.data is not set.
-     * @param {String} [options.key]        Model key/attribute the field relates to.
-     * @param {Mixed} [options.value]       Field value. Required if options.model is not set.
-     * @param {String} [options.idPrefix]   Prefix for the editor ID. By default, the model's CID is used.
-     *
-     * @return {Field}
-     */
-    initialize: function(options) {
-      options = options || {};
-
-      this.form = options.form;
-      this.key = options.key;
-      this.value = options.value;
-      this.model = options.model;
-
-      //Turn schema shorthand notation (e.g. 'Text') into schema object
-      if (_.isString(options.schema)) options.schema = { type: options.schema };
-
-      //Set schema defaults
-      this.schema = _.extend({
-        type: 'Text',
-        title: helpers.keyToTitle(this.key),
-        template: 'field'
-      }, options.schema);
-    },
-
-
-    /**
-     * Provides the context for rendering the field
-     * Override this to extend the default context
-     *
-     * @param {Object} schema
-     * @param {View} editor
-     *
-     * @return {Object}     Locals passed to the template
-     */
-    renderingContext: function(schema, editor) {
-      return {
-        key: this.key,
-        title: schema.title,
-        id: editor.id,
-        type: schema.type,
-        editor: '<b class="bbf-tmp-editor"></b>',
-        help: '<b class="bbf-tmp-help"></b>',
-        error: '<b class="bbf-tmp-error"></b>'
-      };
-    },
+Form.Fieldset = Backbone.View.extend({
 
+  /**
+   * Constructor
+   *
+   * Valid fieldset schemas:
+   *   ['field1', 'field2']
+   *   { legend: 'Some Fieldset', fields: ['field1', 'field2'] }
+   *
+   * @param {String[]|Object[]} options.schema      Fieldset schema
+   * @param {Object} options.fields           Form fields
+   */
+  initialize: function(options) {
+    options = options || {};
 
-    /**
-     * Renders the field
-     */
-    render: function() {
-      var schema = this.schema,
-          templates = Form.templates;
-
-      //Standard options that will go to all editors
-      var options = {
-        form: this.form,
-        key: this.key,
-        schema: schema,
-        idPrefix: this.options.idPrefix,
-        id: this.getId()
-      };
+    //Create the full fieldset schema, merging defaults etc.
+    var schema = this.schema = this.createSchema(options.schema);
 
-      //Decide on data delivery type to pass to editors
-      if (this.model) {
-        options.model = this.model;
-      } else {
-        options.value = this.value;
-      }
+    //Store the fields for this fieldset
+    this.fields = _.pick(options.fields, schema.fields);
+    
+    //Override defaults
+    this.template = options.template || this.constructor.template;
+  },
 
-      //Decide on the editor to use
-      var editor = this.editor = helpers.createEditor(schema.type, options);
+  /**
+   * Creates the full fieldset schema, normalising, merging defaults etc.
+   *
+   * @param {String[]|Object[]} schema
+   *
+   * @return {Object}
+   */
+  createSchema: function(schema) {
+    //Normalise to object
+    if (_.isArray(schema)) {
+      schema = { fields: schema };
+    }
 
-      //Create the element
-      var $field = Form.helpers.parseHTML(templates[schema.template](this.renderingContext(schema, editor)));
+    //Add null legend to prevent template error
+    schema.legend = schema.legend || null;
 
-      //Remove <label> if it's not wanted
-      if (schema.title === false) {
-        $field.find('label[for="'+editor.id+'"]').first().remove();
-      }
+    return schema;
+  },
 
-      //Render editor
-      $field.find('.bbf-tmp-editor').replaceWith(editor.render().el);
+  /**
+   * Returns the field for a given index
+   *
+   * @param {Number} index
+   *
+   * @return {Field}
+   */
+  getFieldAt: function(index) {
+    var key = this.schema.fields[index];
 
-      //Set help text
-      this.$help = $('.bbf-tmp-help', $field).parent();
-      this.$help.empty();
-      if (this.schema.help) this.$help.html(this.schema.help);
+    return this.fields[key];
+  },
 
-      //Create error container
-      this.$error = $($('.bbf-tmp-error', $field).parent()[0]);
-      if (this.$error) this.$error.empty();
+  /**
+   * Returns data to pass to template
+   *
+   * @return {Object}
+   */
+  templateData: function() {
+    return this.schema;
+  },
 
-      //Add custom CSS class names
-      if (this.schema.fieldClass) $field.addClass(this.schema.fieldClass);
+  /**
+   * Renders the fieldset and fields
+   *
+   * @return {Fieldset} this
+   */
+  render: function() {
+    var schema = this.schema,
+        fields = this.fields;
 
-      //Add custom attributes
-      if (this.schema.fieldAttrs) $field.attr(this.schema.fieldAttrs);
+    //Render fieldset
+    var $fieldset = $($.trim(this.template(_.result(this, 'templateData'))));
 
-      //Replace the generated wrapper tag
-      this.setElement($field);
+    //Render fields
+    $fieldset.find('[data-fields]').add($fieldset).each(function(i, el) {
+      var $container = $(el),
+          selection = $container.attr('data-fields');
 
-      return this;
-    },
+      if (_.isUndefined(selection)) return;
 
-    /**
-     * Creates the ID that will be assigned to the editor
-     *
-     * @return {String}
-     */
-    getId: function() {
-      var prefix = this.options.idPrefix,
-          id = this.key;
+      _.each(fields, function(field) {
+        $container.append(field.render().el);
+      });
+    });
 
-      //Replace periods with underscores (e.g. for when using paths)
-      id = id.replace(/\./g, '_');
+    this.setElement($fieldset);
 
-      //If a specific ID prefix is set, use it
-      if (_.isString(prefix) || _.isNumber(prefix)) return prefix + id;
-      if (_.isNull(prefix)) return id;
+    return this;
+  },
 
-      //Otherwise, if there is a model use it's CID to avoid conflicts when multiple forms are on the page
-      if (this.model) return this.model.cid + '_' + id;
+  /**
+   * Remove embedded views then self
+   */
+  remove: function() {
+    _.each(this.fields, function(field) {
+      field.remove();
+    });
 
-      return id;
-    },
+    Backbone.View.prototype.remove.call(this);
+  }
+  
+}, {
+  //STATICS
 
-    /**
-     * Check the validity of the field
-     *
-     * @return {String}
-     */
-    validate: function() {
-      var error = this.editor.validate();
+  template: _.template('\
+    <fieldset data-fields>\
+      <% if (legend) { %>\
+        <legend><%= legend %></legend>\
+      <% } %>\
+    </fieldset>\
+  ', null, Form.templateSettings)
 
-      if (error) {
-        this.setError(error.message);
-      } else {
-        this.clearError();
-      }
+});
 
-      return error;
-    },
 
-    /**
-     * Set the field into an error state, adding the error class and setting the error message
-     *
-     * @param {String} msg     Error message
-     */
-    setError: function(msg) {
-      //Object and NestedModel types set their own errors internally
-      if (this.editor.hasNestedForm) return;
+//==================================================================================================
+//FIELD
+//==================================================================================================
 
-      var errClass = Form.classNames.error;
+Form.Field = Backbone.View.extend({
 
-      this.$el.addClass(errClass);
+  /**
+   * Constructor
+   * 
+   * @param {Object} options.key
+   * @param {Object} options.form
+   * @param {Object} [options.schema]
+   * @param {Function} [options.schema.template]
+   * @param {Backbone.Model} [options.model]
+   * @param {Object} [options.value]
+   * @param {String} [options.idPrefix]
+   * @param {Function} [options.template]
+   * @param {Function} [options.errorClassName]
+   */
+  initialize: function(options) {
+    options = options || {};
 
-      if (this.$error) {
-        this.$error.html(msg);
-      } else if (this.$help) {
-        this.$help.html(msg);
-      }
-    },
+    //Store important data
+    _.extend(this, _.pick(options, 'form', 'key', 'model', 'value', 'idPrefix'));
 
-    /**
-     * Clear the error state and reset the help message
-     */
-    clearError: function() {
-      var errClass = Form.classNames.error;
+    //Create the full field schema, merging defaults etc.
+    var schema = this.schema = this.createSchema(options.schema);
 
-      this.$el.removeClass(errClass);
+    //Override defaults
+    this.template = options.template || schema.template || this.constructor.template;
+    this.errorClassName = options.errorClassName || this.constructor.errorClassName;
 
-      // some fields (e.g., Hidden), may not have a help el
-      if (this.$error) {
-        this.$error.empty();
-      } else if (this.$help) {
-        this.$help.empty();
+    //Create editor
+    this.editor = this.createEditor();
+  },
 
-        //Reset help text if available
-        var helpMsg = this.schema.help;
-        if (helpMsg) this.$help.html(helpMsg);
-      }
-    },
+  /**
+   * Creates the full field schema, merging defaults etc.
+   *
+   * @param {Object|String} schema
+   *
+   * @return {Object}
+   */
+  createSchema: function(schema) {
+    if (_.isString(schema)) schema = { type: schema };
 
-    /**
-     * Update the model with the new value from the editor
-     */
-    commit: function() {
-      return this.editor.commit();
-    },
+    //Set defaults
+    schema = _.extend({
+      type: 'Text',
+      title: this.createTitle()
+    }, schema);
 
-    /**
-     * Get the value from the editor
-     *
-     * @return {Mixed}
-     */
-    getValue: function() {
-      return this.editor.getValue();
-    },
+    //Get the real constructor function i.e. if type is a string such as 'Text'
+    schema.type = (_.isString(schema.type)) ? Form.editors[schema.type] : schema.type;
 
-    /**
-     * Set/change the value of the editor
-     *
-     * @param {Mixed} value
-     */
-    setValue: function(value) {
-      this.editor.setValue(value);
-    },
+    return schema;
+  },
 
-    focus: function() {
-      this.editor.focus();
-    },
+  /**
+   * Creates the editor specified in the schema; either an editor string name or
+   * a constructor function
+   *
+   * @return {View}
+   */
+  createEditor: function() {
+    var options = _.extend(
+      _.pick(this, 'schema', 'form', 'key', 'model', 'value'),
+      { id: this.createEditorId() }
+    );
 
-    blur: function() {
-      this.editor.blur();
-    },
+    var constructorFn = this.schema.type;
+
+    return new constructorFn(options);
+  },
 
-    /**
-     * Remove the field and editor views
-     */
-    remove: function() {
-      this.editor.remove();
+  /**
+   * Creates the ID that will be assigned to the editor
+   *
+   * @return {String}
+   */
+  createEditorId: function() {
+    var prefix = this.idPrefix,
+        id = this.key;
 
-      Backbone.View.prototype.remove.call(this);
-    }
+    //Replace periods with underscores (e.g. for when using paths)
+    id = id.replace(/\./g, '_');
 
-  });
+    //If a specific ID prefix is set, use it
+    if (_.isString(prefix) || _.isNumber(prefix)) return prefix + id;
+    if (_.isNull(prefix)) return id;
 
-})();
+    //Otherwise, if there is a model use it's CID to avoid conflicts when multiple forms are on the page
+    if (this.model) return this.model.cid + '_' + id;
 
+    return id;
+  },
 
-//========================================================================
-//EDITORS
-//========================================================================
+  /**
+   * Create the default field title (label text) from the key name.
+   * (Converts 'camelCase' to 'Camel Case')
+   *
+   * @return {String}
+   */
+  createTitle: function() {
+    var str = this.key;
 
-Form.editors = (function() {
+    //Add spaces
+    str = str.replace(/([A-Z])/g, ' $1');
 
-  var helpers = Form.helpers;
+    //Uppercase first character
+    str = str.replace(/^./, function(str) { return str.toUpperCase(); });
 
-  var editors = {};
+    return str;
+  },
 
   /**
-   * Base editor (interface). To be extended, not used directly
+   * Returns the data to be passed to the template
    *
-   * @param {Object}  Options
-   *      Optional:
-   *         model   {Backbone.Model} : Use instead of value, and use commit().
-   *         key     {String} : The model attribute key. Required when using 'model'
-   *         value   {String} : When not using a model. If neither provided, defaultValue will be used.
-   *         schema  {Object} : May be required by some editors
+   * @return {Object}
    */
-  editors.Base = Backbone.View.extend({
+  templateData: function() {
+    var schema = this.schema;
+
+    return {
+      help: schema.help || '',
+      title: schema.title,
+      fieldAttrs: schema.fieldAttrs,
+      editorAttrs: schema.editorAttrs,
+      key: this.key,
+      editorId: this.editor.id
+    };
+  },
 
-    defaultValue: null,
+  /**
+   * Render the field and editor
+   *
+   * @return {Field} self
+   */
+  render: function() {
+    var schema = this.schema,
+        editor = this.editor;
 
-    hasFocus: false,
+    //Only render the editor if Hidden
+    if (schema.type == Form.editors.Hidden) {
+      return this.setElement(editor.render().el);
+    }
 
-    initialize: function(options) {
-      var options = options || {};
+    //Render field
+    var $field = $($.trim(this.template(_.result(this, 'templateData'))));
 
-      if (options.model) {
-        if (!options.key) throw "Missing option: 'key'";
+    if (schema.fieldClass) $field.addClass(schema.fieldClass);
+    if (schema.fieldAttrs) $field.attr(schema.fieldAttrs);
 
-        this.model = options.model;
+    //Render editor
+    $field.find('[data-editor]').add($field).each(function(i, el) {
+      var $container = $(el),
+          selection = $container.attr('data-editor');
 
-        this.value = this.model.get(options.key);
-      }
-      else if (options.value) {
-        this.value = options.value;
-      }
+      if (_.isUndefined(selection)) return;
 
-      if (this.value === undefined) this.value = this.defaultValue;
+      $container.append(editor.render().el);
+    });
 
-      this.key = options.key;
-      this.form = options.form;
-      this.schema = options.schema || {};
-      this.validators = options.validators || this.schema.validators;
+    this.setElement($field);
 
-      //Main attributes
-      this.$el.attr('name', this.getName());
+    return this;
+  },
 
-      //Add custom CSS class names
-      if (this.schema.editorClass) this.$el.addClass(this.schema.editorClass);
+  /**
+   * Check the validity of the field
+   *
+   * @return {String}
+   */
+  validate: function() {
+    var error = this.editor.validate();
 
-      //Add custom attributes
-      if (this.schema.editorAttrs) this.$el.attr(this.schema.editorAttrs);
-    },
+    if (error) {
+      this.setError(error.message);
+    } else {
+      this.clearError();
+    }
 
-    getValue: function() {
-      throw 'Not implemented. Extend and override this method.';
-    },
+    return error;
+  },
 
-    setValue: function() {
-      throw 'Not implemented. Extend and override this method.';
-    },
+  /**
+   * Set the field into an error state, adding the error class and setting the error message
+   *
+   * @param {String} msg     Error message
+   */
+  setError: function(msg) {
+    //Nested form editors (e.g. Object) set their errors internally
+    if (this.editor.hasNestedForm) return;
 
-    focus: function() {
-      throw 'Not implemented. Extend and override this method.';
-    },
+    //Add error CSS class
+    this.$el.addClass(this.errorClassName);
 
-    blur: function() {
-      throw 'Not implemented. Extend and override this method.';
-    },
+    //Set error message
+    this.$('[data-error]').html(msg);
+  },
 
-    /**
-     * Get the value for the form input 'name' attribute
-     *
-     * @return {String}
-     *
-     * @api private
-     */
-    getName: function() {
-      var key = this.key || '';
-
-      //Replace periods with underscores (e.g. for when using paths)
-      return key.replace(/\./g, '_');
-    },
+  /**
+   * Clear the error state and reset the help message
+   */
+  clearError: function() {
+    //Remove error CSS class
+    this.$el.removeClass(this.errorClassName);
 
-    /**
-     * Update the model with the current value
-     * NOTE: The method is defined on the editors so that they can be used independently of fields
-     *
-     * @return {Mixed} error
-     */
-    commit: function(options) {
-      var error = this.validate();
-      if (error) return error;
-
-      this.listenTo(this.model, 'invalid', function(model, e) {
-        error = e;
-      });
-      this.model.set(this.key, this.getValue(), options);
+    //Clear error message
+    this.$('[data-error]').empty();
+  },
 
-      if (error) return error;
-    },
+  /**
+   * Update the model with the new value from the editor
+   *
+   * @return {Mixed}
+   */
+  commit: function() {
+    return this.editor.commit();
+  },
 
-    /**
-     * Check validity
-     * NOTE: The method is defined on the editors so that they can be used independently of fields
-     *
-     * @return {String}
-     */
-    validate: function() {
-      var $el = this.$el,
-          error = null,
-          value = this.getValue(),
-          formValues = this.form ? this.form.getValue() : {},
-          validators = this.validators,
-          getValidator = Form.helpers.getValidator;
-
-      if (validators) {
-        //Run through validators until an error is found
-        _.every(validators, function(validator) {
-          error = getValidator(validator)(value, formValues);
-
-          return error ? false : true;
-        });
-      }
+  /**
+   * Get the value from the editor
+   *
+   * @return {Mixed}
+   */
+  getValue: function() {
+    return this.editor.getValue();
+  },
 
-      return error;
-    },
+  /**
+   * Set/change the value of the editor
+   *
+   * @param {Mixed} value
+   */
+  setValue: function(value) {
+    this.editor.setValue(value);
+  },
 
+  /**
+   * Give the editor focus
+   */
+  focus: function() {
+    this.editor.focus();
+  },
 
-    trigger: function(event) {
-      if (event === 'focus') {
-        this.hasFocus = true;
-      }
-      else if (event === 'blur') {
-        this.hasFocus = false;
-      }
+  /**
+   * Remove focus from the editor
+   */
+  blur: function() {
+    this.editor.blur();
+  },
 
-      return Backbone.View.prototype.trigger.apply(this, arguments);
-    }
-  });
-
-
-  //TEXT
-  editors.Text = editors.Base.extend({
-
-    tagName: 'input',
-
-    defaultValue: '',
-
-    previousValue: '',
-
-    events: {
-      'keyup':    'determineChange',
-      'keypress': function(event) {
-        var self = this;
-        setTimeout(function() {
-          self.determineChange();
-        }, 0);
-      },
-      'select':   function(event) {
-        this.trigger('select', this);
-      },
-      'focus':    function(event) {
-        this.trigger('focus', this);
-      },
-      'blur':     function(event) {
-        this.trigger('blur', this);
-      }
-    },
+  /**
+   * Remove the field and editor views
+   */
+  remove: function() {
+    this.editor.remove();
 
-    initialize: function(options) {
-      editors.Base.prototype.initialize.call(this, options);
+    Backbone.View.prototype.remove.call(this);
+  }
 
-      var schema = this.schema;
+}, {
+  //STATICS
 
-      //Allow customising text type (email, phone etc.) for HTML5 browsers
-      var type = 'text';
+  template: _.template('\
+    <div>\
+      <label for="<%= editorId %>"><%= title %></label>\
+      <div>\
+        <span data-editor></span>\
+        <div data-error></div>\
+        <div><%= help %></div>\
+      </div>\
+    </div>\
+  ', null, Form.templateSettings),
 
-      if (schema && schema.editorAttrs && schema.editorAttrs.type) type = schema.editorAttrs.type;
-      if (schema && schema.dataType) type = schema.dataType;
+  /**
+   * CSS class name added to the field when there is a validation error
+   */
+  errorClassName: 'error'
 
-      this.$el.attr('type', type);
-    },
+});
 
-    /**
-     * Adds the editor to the DOM
-     */
-    render: function() {
-      this.setValue(this.value);
 
-      return this;
-    },
+//==================================================================================================
+//NESTEDFIELD
+//==================================================================================================
 
-    determineChange: function(event) {
-      var currentValue = this.$el.val();
-      var changed = (currentValue !== this.previousValue);
+Form.NestedField = Form.Field.extend({
 
-      if (changed) {
-        this.previousValue = currentValue;
+  template: _.template($.trim('\
+    <div>\
+      <span data-editor></span>\
+      <% if (help) { %>\
+        <div><%= help %></div>\
+      <% } %>\
+      <div data-error></div>\
+    </div>\
+  '), null, Form.templateSettings)
 
-        this.trigger('change', this);
-      }
-    },
+});
 
-    /**
-     * Returns the current editor value
-     * @return {String}
-     */
-    getValue: function() {
-      return this.$el.val();
-    },
+/**
+ * Base editor (interface). To be extended, not used directly
+ *
+ * @param {Object} options
+ * @param {String} [options.id]         Editor ID
+ * @param {Model} [options.model]       Use instead of value, and use commit()
+ * @param {String} [options.key]        The model attribute key. Required when using 'model'
+ * @param {Mixed} [options.value]       When not using a model. If neither provided, defaultValue will be used
+ * @param {Object} [options.schema]     Field schema; may be required by some editors
+ * @param {Object} [options.validators] Validators; falls back to those stored on schema
+ * @param {Object} [options.form]       The form
+ */
+Form.Editor = Form.editors.Base = Backbone.View.extend({
 
-    /**
-     * Sets the value of the form element
-     * @param {String}
-     */
-    setValue: function(value) {
-      this.$el.val(value);
-    },
+  defaultValue: null,
 
-    focus: function() {
-      if (this.hasFocus) return;
+  hasFocus: false,
 
-      this.$el.focus();
-    },
+  initialize: function(options) {
+    var options = options || {};
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    //Set initial value
+    if (options.model) {
+      if (!options.key) throw "Missing option: 'key'";
 
-      this.$el.blur();
-    },
+      this.model = options.model;
 
-    select: function() {
-      this.$el.select();
+      this.value = this.model.get(options.key);
     }
+    else if (options.value) {
+      this.value = options.value;
+    }
+
+    if (this.value === undefined) this.value = this.defaultValue;
+
+    //Store important data
+    _.extend(this, _.pick(options, 'key', 'form'));
 
-  });
+    var schema = this.schema = options.schema || {};
 
+    this.validators = options.validators || schema.validators;
+
+    //Main attributes
+    this.$el.attr('id', this.id);
+    this.$el.attr('name', this.getName());
+    if (schema.editorClass) this.$el.addClass(schema.editorClass);
+    if (schema.editorAttrs) this.$el.attr(schema.editorAttrs);
+  },
 
   /**
-   * NUMBER
-   * Normal text input that only allows a number. Letters etc. are not entered
+   * Get the value for the form input 'name' attribute
+   *
+   * @return {String}
+   *
+   * @api private
    */
-  editors.Number = editors.Text.extend({
+  getName: function() {
+    var key = this.key || '';
 
-    defaultValue: 0,
+    //Replace periods with underscores (e.g. for when using paths)
+    return key.replace(/\./g, '_');
+  },
 
-    events: _.extend({}, editors.Text.prototype.events, {
-      'keypress': 'onKeyPress'
-    }),
+  /**
+   * Get editor value
+   * Extend and override this method to reflect changes in the DOM
+   *
+   * @return {Mixed}
+   */
+  getValue: function() {
+    return this.value;
+  },
 
-    initialize: function(options) {
-      editors.Text.prototype.initialize.call(this, options);
+  /**
+   * Set editor value
+   * Extend and override this method to reflect changes in the DOM
+   *
+   * @param {Mixed} value
+   */
+  setValue: function(value) {
+    this.value = value;
+  },
 
-      this.$el.attr('type', 'number');
-      this.$el.attr('step', 'any');
-    },
+  /**
+   * Give the editor focus
+   * Extend and override this method
+   */
+  focus: function() {
+    throw 'Not implemented';
+  },
+  
+  /**
+   * Remove focus from the editor
+   * Extend and override this method
+   */
+  blur: function() {
+    throw 'Not implemented';
+  },
 
-    /**
-     * Check value is numeric
-     */
-    onKeyPress: function(event) {
-      var self = this,
-          delayedDetermineChange = function() {
-            setTimeout(function() {
-              self.determineChange();
-            }, 0);
-          };
-
-      //Allow backspace
-      if (event.charCode === 0) {
-        delayedDetermineChange();
-        return;
-      }
+  /**
+   * Update the model with the current value
+   *
+   * @param {Object} [options]              Options to pass to model.set()
+   * @param {Boolean} [options.validate]    Set to true to trigger built-in model validation
+   *
+   * @return {Mixed} error
+   */
+  commit: function(options) {
+    var error = this.validate();
+    if (error) return error;
 
-      //Get the whole new value so that we can prevent things like double decimals points etc.
-      var newVal = this.$el.val() + String.fromCharCode(event.charCode);
+    this.listenTo(this.model, 'invalid', function(model, e) {
+      error = e;
+    });
+    this.model.set(this.key, this.getValue(), options);
 
-      var numeric = /^[0-9]*\.?[0-9]*?$/.test(newVal);
+    if (error) return error;
+  },
 
-      if (numeric) {
-        delayedDetermineChange();
-      }
-      else {
-        event.preventDefault();
-      }
-    },
+  /**
+   * Check validity
+   *
+   * @return {Object|Undefined}
+   */
+  validate: function() {
+    var $el = this.$el,
+        error = null,
+        value = this.getValue(),
+        formValues = this.form ? this.form.getValue() : {},
+        validators = this.validators,
+        getValidator = this.getValidator;
+
+    if (validators) {
+      //Run through validators until an error is found
+      _.every(validators, function(validator) {
+        error = getValidator(validator)(value, formValues);
+
+        return error ? false : true;
+      });
+    }
 
-    getValue: function() {
-      var value = this.$el.val();
+    return error;
+  },
 
-      return value === "" ? null : parseFloat(value, 10);
-    },
+  /**
+   * Set this.hasFocus, or call parent trigger()
+   *
+   * @param {String} event
+   */
+  trigger: function(event) {
+    if (event === 'focus') {
+      this.hasFocus = true;
+    }
+    else if (event === 'blur') {
+      this.hasFocus = false;
+    }
 
-    setValue: function(value) {
-      value = (function() {
-        if (_.isNumber(value)) return value;
+    return Backbone.View.prototype.trigger.apply(this, arguments);
+  },
 
-        if (_.isString(value) && value !== '') return parseFloat(value, 10);
+  /**
+   * Returns a validation function based on the type defined in the schema
+   *
+   * @param {RegExp|String|Function} validator
+   * @return {Function}
+   */
+  getValidator: function(validator) {
+    var validators = Form.validators;
 
-        return null;
-      })();
+    //Convert regular expressions to validators
+    if (_.isRegExp(validator)) {
+      return validators.regexp({ regexp: validator });
+    }
+    
+    //Use a built-in validator if given a string
+    if (_.isString(validator)) {
+      if (!validators[validator]) throw new Error('Validator "'+validator+'" not found');
+      
+      return validators[validator]();
+    }
 
-      if (_.isNaN(value)) value = null;
+    //Functions can be used directly
+    if (_.isFunction(validator)) return validator;
 
-      editors.Text.prototype.setValue.call(this, value);
+    //Use a customised built-in validator if given an object
+    if (_.isObject(validator) && validator.type) {
+      var config = validator;
+      
+      return validators[config.type](config);
     }
+    
+    //Unkown validator type
+    throw new Error('Invalid validator: ' + validator);
+  }
+});
 
-  });
+/**
+ * Text
+ * 
+ * Text input with focus, blur and change events
+ */
+Form.editors.Text = Form.Editor.extend({
 
+  tagName: 'input',
 
-  //PASSWORD
-  editors.Password = editors.Text.extend({
+  defaultValue: '',
 
-    initialize: function(options) {
-      editors.Text.prototype.initialize.call(this, options);
+  previousValue: '',
 
-      this.$el.attr('type', 'password');
+  events: {
+    'keyup':    'determineChange',
+    'keypress': function(event) {
+      var self = this;
+      setTimeout(function() {
+        self.determineChange();
+      }, 0);
+    },
+    'select':   function(event) {
+      this.trigger('select', this);
+    },
+    'focus':    function(event) {
+      this.trigger('focus', this);
+    },
+    'blur':     function(event) {
+      this.trigger('blur', this);
     }
+  },
 
-  });
+  initialize: function(options) {
+    Form.editors.Base.prototype.initialize.call(this, options);
 
+    var schema = this.schema;
 
-  //TEXTAREA
-  editors.TextArea = editors.Text.extend({
+    //Allow customising text type (email, phone etc.) for HTML5 browsers
+    var type = 'text';
 
-    tagName: 'textarea'
+    if (schema && schema.editorAttrs && schema.editorAttrs.type) type = schema.editorAttrs.type;
+    if (schema && schema.dataType) type = schema.dataType;
 
-  });
+    this.$el.attr('type', type);
+  },
 
+  /**
+   * Adds the editor to the DOM
+   */
+  render: function() {
+    this.setValue(this.value);
 
-  //CHECKBOX
-  editors.Checkbox = editors.Base.extend({
+    return this;
+  },
 
-    defaultValue: false,
+  determineChange: function(event) {
+    var currentValue = this.$el.val();
+    var changed = (currentValue !== this.previousValue);
 
-    tagName: 'input',
+    if (changed) {
+      this.previousValue = currentValue;
 
-    events: {
-      'click':  function(event) {
-        this.trigger('change', this);
-      },
-      'focus':  function(event) {
-        this.trigger('focus', this);
-      },
-      'blur':   function(event) {
-        this.trigger('blur', this);
-      }
-    },
+      this.trigger('change', this);
+    }
+  },
 
-    initialize: function(options) {
-      editors.Base.prototype.initialize.call(this, options);
+  /**
+   * Returns the current editor value
+   * @return {String}
+   */
+  getValue: function() {
+    return this.$el.val();
+  },
 
-      this.$el.attr('type', 'checkbox');
-    },
+  /**
+   * Sets the value of the form element
+   * @param {String}
+   */
+  setValue: function(value) {
+    this.$el.val(value);
+  },
 
-    /**
-     * Adds the editor to the DOM
-     */
-    render: function() {
-      this.setValue(this.value);
+  focus: function() {
+    if (this.hasFocus) return;
 
-      return this;
-    },
+    this.$el.focus();
+  },
 
-    getValue: function() {
-      return this.$el.prop('checked');
-    },
+  blur: function() {
+    if (!this.hasFocus) return;
 
-    setValue: function(value) {
-      if (value) {
-        this.$el.prop('checked', true);
-      }
-    },
+    this.$el.blur();
+  },
 
-    focus: function() {
-      if (this.hasFocus) return;
+  select: function() {
+    this.$el.select();
+  }
 
-      this.$el.focus();
-    },
+});
 
-    blur: function() {
-      if (!this.hasFocus) return;
+/**
+ * TextArea editor
+ */
+Form.editors.TextArea = Form.editors.Text.extend({
 
-      this.$el.blur();
-    }
+  tagName: 'textarea',
+
+  /**
+   * Override Text constructor so type property isn't set (issue #261)
+   */
+  initialize: function(options) {
+    Form.editors.Base.prototype.initialize.call(this, options);
+  }
 
-  });
+});
 
+/**
+ * Password editor
+ */
+Form.editors.Password = Form.editors.Text.extend({
 
-  //HIDDEN
-  editors.Hidden = editors.Base.extend({
+  initialize: function(options) {
+    Form.editors.Text.prototype.initialize.call(this, options);
 
-    defaultValue: '',
+    this.$el.attr('type', 'password');
+  }
 
-    initialize: function(options) {
-      editors.Text.prototype.initialize.call(this, options);
+});
 
-      this.$el.attr('type', 'hidden');
-    },
+/**
+ * NUMBER
+ * 
+ * Normal text input that only allows a number. Letters etc. are not entered.
+ */
+Form.editors.Number = Form.editors.Text.extend({
 
-    getValue: function() {
-      return this.value;
-    },
+  defaultValue: 0,
 
-    setValue: function(value) {
-      this.value = value;
-    },
+  events: _.extend({}, Form.editors.Text.prototype.events, {
+    'keypress': 'onKeyPress',
+    'change': 'onKeyPress'
+  }),
 
-    focus: function() {
+  initialize: function(options) {
+    Form.editors.Text.prototype.initialize.call(this, options);
 
-    },
+    this.$el.attr('type', 'number');
+    this.$el.attr('step', 'any');
+  },
 
-    blur: function() {
+  /**
+   * Check value is numeric
+   */
+  onKeyPress: function(event) {
+    var self = this,
+        delayedDetermineChange = function() {
+          setTimeout(function() {
+            self.determineChange();
+          }, 0);
+        };
 
+    //Allow backspace
+    if (event.charCode === 0) {
+      delayedDetermineChange();
+      return;
     }
 
-  });
+    //Get the whole new value so that we can prevent things like double decimals points etc.
+    var newVal = this.$el.val()
+    if( event.charCode != undefined ) {
+      newVal = newVal + String.fromCharCode(event.charCode);
+    }
 
+    var numeric = /^[0-9]*\.?[0-9]*?$/.test(newVal);
 
-  /**
-   * SELECT
-   *
-   * Renders a <select> with given options
-   *
-   * Requires an 'options' value on the schema.
-   *  Can be an array of options, a function that calls back with the array of options, a string of HTML
-   *  or a Backbone collection. If a collection, the models must implement a toString() method
-   */
-  editors.Select = editors.Base.extend({
+    if (numeric) {
+      delayedDetermineChange();
+    }
+    else {
+      event.preventDefault();
+    }
+  },
 
-    tagName: 'select',
+  getValue: function() {
+    var value = this.$el.val();
 
-    events: {
-      'change': function(event) {
-        this.trigger('change', this);
-      },
-      'focus':  function(event) {
-        this.trigger('focus', this);
-      },
-      'blur':   function(event) {
-        this.trigger('blur', this);
-      }
-    },
+    return value === "" ? null : parseFloat(value, 10);
+  },
 
-    initialize: function(options) {
-      editors.Base.prototype.initialize.call(this, options);
+  setValue: function(value) {
+    value = (function() {
+      if (_.isNumber(value)) return value;
 
-      if (!this.schema || !this.schema.options) throw "Missing required 'schema.options'";
-    },
+      if (_.isString(value) && value !== '') return parseFloat(value, 10);
 
-    render: function() {
-      this.setOptions(this.schema.options);
+      return null;
+    })();
 
-      return this;
-    },
+    if (_.isNaN(value)) value = null;
 
-    /**
-     * Sets the options that populate the <select>
-     *
-     * @param {Mixed} options
-     */
-    setOptions: function(options) {
-      var self = this;
+    Form.editors.Text.prototype.setValue.call(this, value);
+  }
 
-      //If a collection was passed, check if it needs fetching
-      if (options instanceof Backbone.Collection) {
-        var collection = options;
+});
 
-        //Don't do the fetch if it's already populated
-        if (collection.length > 0) {
-          this.renderOptions(options);
-        } else {
-          collection.fetch({
-            success: function(collection) {
-              self.renderOptions(options);
-            }
-          });
-        }
-      }
+/**
+ * Hidden editor
+ */
+Form.editors.Hidden = Form.editors.Text.extend({
 
-      //If a function was passed, run it to get the options
-      else if (_.isFunction(options)) {
-        options(function(result) {
-          self.renderOptions(result);
-        }, self);
-      }
+  defaultValue: '',
 
-      //Otherwise, ready to go straight to renderOptions
-      else {
-        this.renderOptions(options);
-      }
-    },
+  initialize: function(options) {
+    Form.editors.Text.prototype.initialize.call(this, options);
 
-    /**
-     * Adds the <option> html to the DOM
-     * @param {Mixed}   Options as a simple array e.g. ['option1', 'option2']
-     *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
-     *                      or as a string of <option> HTML to insert into the <select>
-     */
-    renderOptions: function(options) {
-      var $select = this.$el,
-          html;
+    this.$el.attr('type', 'hidden');
+  },
 
-      html = this._getOptionsHtml(options);
+  focus: function() {
 
-      //Insert options
-      $select.html(html);
+  },
 
-      //Select correct option
-      this.setValue(this.value);
-    },
+  blur: function() {
 
-    _getOptionsHtml: function(options) {
-      var html;
-      //Accept string of HTML
-      if (_.isString(options)) {
-        html = options;
-      }
+  }
 
-      //Or array
-      else if (_.isArray(options)) {
-        html = this._arrayToHtml(options);
-      }
+});
 
-      //Or Backbone collection
-      else if (options instanceof Backbone.Collection) {
-        html = this._collectionToHtml(options);
-      }
+/**
+ * Checkbox editor
+ *
+ * Creates a single checkbox, i.e. boolean value
+ */
+Form.editors.Checkbox = Form.editors.Base.extend({
 
-      else if (_.isFunction(options)) {
-        var newOptions;
-        
-        options(function(opts) {
-          newOptions = opts;
-        }, this);
-        
-        html = this._getOptionsHtml(newOptions);
-      }
+  defaultValue: false,
 
-      return html;
-    },
+  tagName: 'input',
 
-    getValue: function() {
-      return this.$el.val();
+  events: {
+    'click':  function(event) {
+      this.trigger('change', this);
     },
-
-    setValue: function(value) {
-      this.$el.val(value);
+    'focus':  function(event) {
+      this.trigger('focus', this);
     },
+    'blur':   function(event) {
+      this.trigger('blur', this);
+    }
+  },
 
-    focus: function() {
-      if (this.hasFocus) return;
+  initialize: function(options) {
+    Form.editors.Base.prototype.initialize.call(this, options);
 
-      this.$el.focus();
-    },
+    this.$el.attr('type', 'checkbox');
+  },
 
-    blur: function() {
-      if (!this.hasFocus) return;
+  /**
+   * Adds the editor to the DOM
+   */
+  render: function() {
+    this.setValue(this.value);
 
-      this.$el.blur();
-    },
+    return this;
+  },
 
-    /**
-     * Transforms a collection into HTML ready to use in the renderOptions method
-     * @param {Backbone.Collection}
-     * @return {String}
-     */
-    _collectionToHtml: function(collection) {
-      //Convert collection to array first
-      var array = [];
-      collection.each(function(model) {
-        array.push({ val: model.id, label: model.toString() });
-      });
+  getValue: function() {
+    return this.$el.prop('checked');
+  },
 
-      //Now convert to HTML
-      var html = this._arrayToHtml(array);
+  setValue: function(value) {
+    if (value) {
+      this.$el.prop('checked', true);
+    }else{
+      this.$el.prop('checked', false);
+    }
+  },
 
-      return html;
-    },
+  focus: function() {
+    if (this.hasFocus) return;
 
-    /**
-     * Create the <option> HTML
-     * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
-     *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
-     * @return {String} HTML
-     */
-    _arrayToHtml: function(array) {
-      var html = [];
-
-      //Generate HTML
-      _.each(array, function(option) {
-        if (_.isObject(option)) {
-          if (option.group) {
-            html.push('<optgroup label="'+option.group+'">');
-            html.push(this._getOptionsHtml(option.options))
-            html.push('</optgroup>');
-          } else {
-            var val = (option.val || option.val === 0) ? option.val : '';
-            html.push('<option value="'+val+'">'+option.label+'</option>');
-          }
-        }
-        else {
-          html.push('<option>'+option+'</option>');
-        }
-      }, this);
+    this.$el.focus();
+  },
+
+  blur: function() {
+    if (!this.hasFocus) return;
+
+    this.$el.blur();
+  }
+
+});
+
+/**
+ * Select editor
+ *
+ * Renders a <select> with given options
+ *
+ * Requires an 'options' value on the schema.
+ *  Can be an array of options, a function that calls back with the array of options, a string of HTML
+ *  or a Backbone collection. If a collection, the models must implement a toString() method
+ */
+Form.editors.Select = Form.editors.Base.extend({
 
-      return html.join('');
+  tagName: 'select',
+
+  events: {
+    'change': function(event) {
+      this.trigger('change', this);
+    },
+    'focus':  function(event) {
+      this.trigger('focus', this);
+    },
+    'blur':   function(event) {
+      this.trigger('blur', this);
     }
+  },
+
+  initialize: function(options) {
+    Form.editors.Base.prototype.initialize.call(this, options);
 
-  });
+    if (!this.schema || !this.schema.options) throw "Missing required 'schema.options'";
+  },
 
+  render: function() {
+    this.setOptions(this.schema.options);
 
+    return this;
+  },
 
   /**
-   * RADIO
+   * Sets the options that populate the <select>
    *
-   * Renders a <ul> with given options represented as <li> objects containing radio buttons
-   *
-   * Requires an 'options' value on the schema.
-   *  Can be an array of options, a function that calls back with the array of options, a string of HTML
-   *  or a Backbone collection. If a collection, the models must implement a toString() method
+   * @param {Mixed} options
    */
-  editors.Radio = editors.Select.extend({
+  setOptions: function(options) {
+    var self = this;
 
-    tagName: 'ul',
-    className: 'bbf-radio',
+    //If a collection was passed, check if it needs fetching
+    if (options instanceof Backbone.Collection) {
+      var collection = options;
 
-    events: {
-      'change input[type=radio]': function() {
-        this.trigger('change', this);
-      },
-      'focus input[type=radio]': function() {
-        if (this.hasFocus) return;
-        this.trigger('focus', this);
-      },
-      'blur input[type=radio]': function() {
-        if (!this.hasFocus) return;
-        var self = this;
-        setTimeout(function() {
-          if (self.$('input[type=radio]:focus')[0]) return;
-          self.trigger('blur', self);
-        }, 0);
+      //Don't do the fetch if it's already populated
+      if (collection.length > 0) {
+        this.renderOptions(options);
+      } else {
+        collection.fetch({
+          success: function(collection) {
+            self.renderOptions(options);
+          }
+        });
       }
-    },
+    }
 
-    getValue: function() {
-      return this.$('input[type=radio]:checked').val();
-    },
+    //If a function was passed, run it to get the options
+    else if (_.isFunction(options)) {
+      options(function(result) {
+        self.renderOptions(result);
+      }, self);
+    }
 
-    setValue: function(value) {
-      this.$('input[type=radio]').val([value]);
-    },
+    //Otherwise, ready to go straight to renderOptions
+    else {
+      this.renderOptions(options);
+    }
+  },
 
-    focus: function() {
-      if (this.hasFocus) return;
+  /**
+   * Adds the <option> html to the DOM
+   * @param {Mixed}   Options as a simple array e.g. ['option1', 'option2']
+   *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
+   *                      or as a string of <option> HTML to insert into the <select>
+   */
+  renderOptions: function(options) {
+    var $select = this.$el,
+        html;
 
-      var checked = this.$('input[type=radio]:checked');
-      if (checked[0]) {
-        checked.focus();
-        return;
-      }
+    html = this._getOptionsHtml(options);
 
-      this.$('input[type=radio]').first().focus();
-    },
+    //Insert options
+    $select.html(html);
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    //Select correct option
+    this.setValue(this.value);
+  },
 
-      this.$('input[type=radio]:focus').blur();
-    },
+  _getOptionsHtml: function(options) {
+    var html;
+    //Accept string of HTML
+    if (_.isString(options)) {
+      html = options;
+    }
 
-    /**
-     * Create the radio list HTML
-     * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
-     *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
-     * @return {String} HTML
-     */
-    _arrayToHtml: function (array) {
-      var html = [];
-      var self = this;
+    //Or array
+    else if (_.isArray(options)) {
+      html = this._arrayToHtml(options);
+    }
 
-      _.each(array, function(option, index) {
-        var itemHtml = '<li>';
-        if (_.isObject(option)) {
-          var val = (option.val || option.val === 0) ? option.val : '';
-          itemHtml += ('<input type="radio" name="'+self.id+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
-          itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
-        }
-        else {
-          itemHtml += ('<input type="radio" name="'+self.id+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
-          itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
-        }
-        itemHtml += '</li>';
-        html.push(itemHtml);
-      });
+    //Or Backbone collection
+    else if (options instanceof Backbone.Collection) {
+      html = this._collectionToHtml(options);
+    }
 
-      return html.join('');
+    else if (_.isFunction(options)) {
+      var newOptions;
+      
+      options(function(opts) {
+        newOptions = opts;
+      }, this);
+      
+      html = this._getOptionsHtml(newOptions);
     }
 
-  });
+    return html;
+  },
+
+  getValue: function() {
+    return this.$el.val();
+  },
+
+  setValue: function(value) {
+    this.$el.val(value);
+  },
+
+  focus: function() {
+    if (this.hasFocus) return;
+
+    this.$el.focus();
+  },
 
+  blur: function() {
+    if (!this.hasFocus) return;
 
+    this.$el.blur();
+  },
 
   /**
-   * CHECKBOXES
-   * Renders a <ul> with given options represented as <li> objects containing checkboxes
-   *
-   * Requires an 'options' value on the schema.
-   *  Can be an array of options, a function that calls back with the array of options, a string of HTML
-   *  or a Backbone collection. If a collection, the models must implement a toString() method
+   * Transforms a collection into HTML ready to use in the renderOptions method
+   * @param {Backbone.Collection}
+   * @return {String}
    */
-  editors.Checkboxes = editors.Select.extend({
+  _collectionToHtml: function(collection) {
+    //Convert collection to array first
+    var array = [];
+    collection.each(function(model) {
+      array.push({ val: model.id, label: model.toString() });
+    });
 
-    tagName: 'ul',
-    className: 'bbf-checkboxes',
+    //Now convert to HTML
+    var html = this._arrayToHtml(array);
 
-    events: {
-      'click input[type=checkbox]': function() {
-        this.trigger('change', this);
-      },
-      'focus input[type=checkbox]': function() {
-        if (this.hasFocus) return;
-        this.trigger('focus', this);
-      },
-      'blur input[type=checkbox]':  function() {
-        if (!this.hasFocus) return;
-        var self = this;
-        setTimeout(function() {
-          if (self.$('input[type=checkbox]:focus')[0]) return;
-          self.trigger('blur', self);
-        }, 0);
+    return html;
+  },
+
+  /**
+   * Create the <option> HTML
+   * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
+   *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
+   * @return {String} HTML
+   */
+  _arrayToHtml: function(array) {
+    var html = [];
+
+    //Generate HTML
+    _.each(array, function(option) {
+      if (_.isObject(option)) {
+        if (option.group) {
+          html.push('<optgroup label="'+option.group+'">');
+          html.push(this._getOptionsHtml(option.options))
+          html.push('</optgroup>');
+        } else {
+          var val = (option.val || option.val === 0) ? option.val : '';
+          html.push('<option value="'+val+'">'+option.label+'</option>');
+        }
       }
-    },
+      else {
+        html.push('<option>'+option+'</option>');
+      }
+    }, this);
 
-    getValue: function() {
-      var values = [];
-      this.$('input[type=checkbox]:checked').each(function() {
-        values.push($(this).val());
-      });
-      return values;
-    },
+    return html.join('');
+  }
 
-    setValue: function(values) {
-      if (!_.isArray(values)) values = [values];
-      this.$('input[type=checkbox]').val(values);
-    },
+});
 
-    focus: function() {
-      if (this.hasFocus) return;
+/**
+ * Radio editor
+ *
+ * Renders a <ul> with given options represented as <li> objects containing radio buttons
+ *
+ * Requires an 'options' value on the schema.
+ *  Can be an array of options, a function that calls back with the array of options, a string of HTML
+ *  or a Backbone collection. If a collection, the models must implement a toString() method
+ */
+Form.editors.Radio = Form.editors.Select.extend({
 
-      this.$('input[type=checkbox]').first().focus();
-    },
+  tagName: 'ul',
 
-    blur: function() {
+  events: {
+    'change input[type=radio]': function() {
+      this.trigger('change', this);
+    },
+    'focus input[type=radio]': function() {
+      if (this.hasFocus) return;
+      this.trigger('focus', this);
+    },
+    'blur input[type=radio]': function() {
       if (!this.hasFocus) return;
+      var self = this;
+      setTimeout(function() {
+        if (self.$('input[type=radio]:focus')[0]) return;
+        self.trigger('blur', self);
+      }, 0);
+    }
+  },
 
-      this.$('input[type=checkbox]:focus').blur();
-    },
+  getValue: function() {
+    return this.$('input[type=radio]:checked').val();
+  },
 
-    /**
-     * Create the checkbox list HTML
-     * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
-     *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
-     * @return {String} HTML
-     */
-    _arrayToHtml: function (array) {
-      var html = [];
-      var self = this;
+  setValue: function(value) {
+    this.$('input[type=radio]').val([value]);
+  },
 
-      _.each(array, function(option, index) {
-        var itemHtml = '<li>';
-        if (_.isObject(option)) {
-          var val = (option.val || option.val === 0) ? option.val : '';
-          itemHtml += ('<input type="checkbox" name="'+self.id+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
-          itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
-        }
-        else {
-          itemHtml += ('<input type="checkbox" name="'+self.id+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
-          itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
-        }
-        itemHtml += '</li>';
-        html.push(itemHtml);
-      });
+  focus: function() {
+    if (this.hasFocus) return;
 
-      return html.join('');
+    var checked = this.$('input[type=radio]:checked');
+    if (checked[0]) {
+      checked.focus();
+      return;
     }
 
-  });
+    this.$('input[type=radio]').first().focus();
+  },
 
+  blur: function() {
+    if (!this.hasFocus) return;
 
+    this.$('input[type=radio]:focus').blur();
+  },
 
   /**
-   * OBJECT
-   *
-   * Creates a child form. For editing Javascript objects
-   *
-   * @param {Object} options
-   * @param {Object} options.schema             The schema for the object
-   * @param {Object} options.schema.subSchema   The schema for the nested form
+   * Create the radio list HTML
+   * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
+   *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
+   * @return {String} HTML
    */
-  editors.Object = editors.Base.extend({
-    //Prevent error classes being set on the main control; they are internally on the individual fields
-    hasNestedForm: true,
+  _arrayToHtml: function (array) {
+    var html = [];
+    var self = this;
+
+    _.each(array, function(option, index) {
+      var itemHtml = '<li>';
+      if (_.isObject(option)) {
+        var val = (option.val || option.val === 0) ? option.val : '';
+        itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
+        itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
+      }
+      else {
+        itemHtml += ('<input type="radio" name="'+self.getName()+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
+        itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
+      }
+      itemHtml += '</li>';
+      html.push(itemHtml);
+    });
+
+    return html.join('');
+  }
 
-    className: 'bbf-object',
+});
 
-    initialize: function(options) {
-      //Set default value for the instance so it's not a shared object
-      this.value = {};
+/**
+ * Checkboxes editor
+ *
+ * Renders a <ul> with given options represented as <li> objects containing checkboxes
+ *
+ * Requires an 'options' value on the schema.
+ *  Can be an array of options, a function that calls back with the array of options, a string of HTML
+ *  or a Backbone collection. If a collection, the models must implement a toString() method
+ */
+Form.editors.Checkboxes = Form.editors.Select.extend({
 
-      //Init
-      editors.Base.prototype.initialize.call(this, options);
+  tagName: 'ul',
 
-      //Check required options
-      if (!this.schema.subSchema) throw new Error("Missing required 'schema.subSchema' option for Object editor");
+  events: {
+    'click input[type=checkbox]': function() {
+      this.trigger('change', this);
+    },
+    'focus input[type=checkbox]': function() {
+      if (this.hasFocus) return;
+      this.trigger('focus', this);
     },
+    'blur input[type=checkbox]':  function() {
+      if (!this.hasFocus) return;
+      var self = this;
+      setTimeout(function() {
+        if (self.$('input[type=checkbox]:focus')[0]) return;
+        self.trigger('blur', self);
+      }, 0);
+    }
+  },
 
-    render: function() {
-      //Create the nested form
-      this.form = new Form({
-        schema: this.schema.subSchema,
-        data: this.value,
-        idPrefix: this.id + '_',
-        fieldTemplate: 'nestedField'
-      });
+  getValue: function() {
+    var values = [];
+    this.$('input[type=checkbox]:checked').each(function() {
+      values.push($(this).val());
+    });
+    return values;
+  },
 
-      this._observeFormEvents();
+  setValue: function(values) {
+    if (!_.isArray(values)) values = [values];
+    this.$('input[type=checkbox]').val(values);
+  },
 
-      this.$el.html(this.form.render().el);
+  focus: function() {
+    if (this.hasFocus) return;
 
-      if (this.hasFocus) this.trigger('blur', this);
+    this.$('input[type=checkbox]').first().focus();
+  },
 
-      return this;
-    },
+  blur: function() {
+    if (!this.hasFocus) return;
 
-    getValue: function() {
-      if (this.form) return this.form.getValue();
+    this.$('input[type=checkbox]:focus').blur();
+  },
 
-      return this.value;
-    },
+  /**
+   * Create the checkbox list HTML
+   * @param {Array}   Options as a simple array e.g. ['option1', 'option2']
+   *                      or as an array of objects e.g. [{val: 543, label: 'Title for object 543'}]
+   * @return {String} HTML
+   */
+  _arrayToHtml: function (array) {
+    var html = [];
+    var self = this;
+
+    _.each(array, function(option, index) {
+      var itemHtml = '<li>';
+      if (_.isObject(option)) {
+        var val = (option.val || option.val === 0) ? option.val : '';
+        itemHtml += ('<input type="checkbox" name="'+self.getName()+'" value="'+val+'" id="'+self.id+'-'+index+'" />');
+        itemHtml += ('<label for="'+self.id+'-'+index+'">'+option.label+'</label>');
+      }
+      else {
+        itemHtml += ('<input type="checkbox" name="'+self.getName()+'" value="'+option+'" id="'+self.id+'-'+index+'" />');
+        itemHtml += ('<label for="'+self.id+'-'+index+'">'+option+'</label>');
+      }
+      itemHtml += '</li>';
+      html.push(itemHtml);
+    });
 
-    setValue: function(value) {
-      this.value = value;
+    return html.join('');
+  }
 
-      this.render();
-    },
+});
 
-    focus: function() {
-      if (this.hasFocus) return;
+/**
+ * Object editor
+ *
+ * Creates a child form. For editing Javascript objects
+ *
+ * @param {Object} options
+ * @param {Form} options.form                 The form this editor belongs to; used to determine the constructor for the nested form
+ * @param {Object} options.schema             The schema for the object
+ * @param {Object} options.schema.subSchema   The schema for the nested form
+ */
+Form.editors.Object = Form.editors.Base.extend({
+  //Prevent error classes being set on the main control; they are internally on the individual fields
+  hasNestedForm: true,
+
+  initialize: function(options) {
+    //Set default value for the instance so it's not a shared object
+    this.value = {};
+
+    //Init
+    Form.editors.Base.prototype.initialize.call(this, options);
+
+    //Check required options
+    if (!this.form) throw 'Missing required option "form"';
+    if (!this.schema.subSchema) throw new Error("Missing required 'schema.subSchema' option for Object editor");
+  },
+
+  render: function() {
+    //Get the constructor for creating the nested form; i.e. the same constructor as used by the parent form
+    var NestedForm = this.form.constructor;
+
+    //Create the nested form
+    this.nestedForm = new NestedForm({
+      schema: this.schema.subSchema,
+      data: this.value,
+      idPrefix: this.id + '_',
+      Field: NestedForm.NestedField
+    });
 
-      this.form.focus();
-    },
+    this._observeFormEvents();
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    this.$el.html(this.nestedForm.render().el);
 
-      this.form.blur();
-    },
+    if (this.hasFocus) this.trigger('blur', this);
 
-    remove: function() {
-      this.form.remove();
+    return this;
+  },
 
-      Backbone.View.prototype.remove.call(this);
-    },
+  getValue: function() {
+    if (this.nestedForm) return this.nestedForm.getValue();
 
-    validate: function() {
-      return this.form.validate();
-    },
+    return this.value;
+  },
 
-    _observeFormEvents: function() {
-      this.form.on('all', function() {
-        // args = ["key:change", form, fieldEditor]
-        var args = _.toArray(arguments);
-        args[1] = this;
-        // args = ["key:change", this=objectEditor, fieldEditor]
+  setValue: function(value) {
+    this.value = value;
 
-        this.trigger.apply(this, args);
-      }, this);
-    }
+    this.render();
+  },
 
-  });
+  focus: function() {
+    if (this.hasFocus) return;
 
+    this.nestedForm.focus();
+  },
 
+  blur: function() {
+    if (!this.hasFocus) return;
 
-  /**
-   * NESTED MODEL
-   *
-   * Creates a child form. For editing nested Backbone models
-   *
-   * Special options:
-   *   schema.model:   Embedded model constructor
-   */
-  editors.NestedModel = editors.Object.extend({
-    initialize: function(options) {
-      editors.Base.prototype.initialize.call(this, options);
+    this.nestedForm.blur();
+  },
 
-      if (!options.schema.model)
-        throw 'Missing required "schema.model" option for NestedModel editor';
-    },
+  remove: function() {
+    this.nestedForm.remove();
 
-    render: function() {
-      var data = this.value || {},
-          key = this.key,
-          nestedModel = this.schema.model;
+    Backbone.View.prototype.remove.call(this);
+  },
 
-      //Wrap the data in a model if it isn't already a model instance
-      var modelInstance = (data.constructor === nestedModel) ? data : new nestedModel(data);
+  validate: function() {
+    return this.nestedForm.validate();
+  },
 
-      this.form = new Form({
-        model: modelInstance,
-        idPrefix: this.id + '_',
-        fieldTemplate: 'nestedField'
-      });
+  _observeFormEvents: function() {
+    if (!this.nestedForm) return;
+    
+    this.nestedForm.on('all', function() {
+      // args = ["key:change", form, fieldEditor]
+      var args = _.toArray(arguments);
+      args[1] = this;
+      // args = ["key:change", this=objectEditor, fieldEditor]
+
+      this.trigger.apply(this, args);
+    }, this);
+  }
+
+});
+
+/**
+ * NestedModel editor
+ *
+ * Creates a child form. For editing nested Backbone models
+ *
+ * Special options:
+ *   schema.model:   Embedded model constructor
+ */
+Form.editors.NestedModel = Form.editors.Object.extend({
+  initialize: function(options) {
+    Form.editors.Base.prototype.initialize.call(this, options);
 
-      this._observeFormEvents();
+    if (!this.form) throw 'Missing required option "form"';
+    if (!options.schema.model) throw 'Missing required "schema.model" option for NestedModel editor';
+  },
 
-      //Render form
-      this.$el.html(this.form.render().el);
+  render: function() {
+    //Get the constructor for creating the nested form; i.e. the same constructor as used by the parent form
+    var NestedForm = this.form.constructor;
 
-      if (this.hasFocus) this.trigger('blur', this);
+    var data = this.value || {},
+        key = this.key,
+        nestedModel = this.schema.model;
 
-      return this;
-    },
+    //Wrap the data in a model if it isn't already a model instance
+    var modelInstance = (data.constructor === nestedModel) ? data : new nestedModel(data);
 
-    /**
-     * Update the embedded model, checking for nested validation errors and pass them up
-     * Then update the main model if all OK
-     *
-     * @return {Error|null} Validation error or null
-     */
-    commit: function() {
-      var error = this.form.commit();
-      if (error) {
-        this.$el.addClass('error');
-        return error;
-      }
+    this.nestedForm = new NestedForm({
+      model: modelInstance,
+      idPrefix: this.id + '_',
+      fieldTemplate: 'nestedField'
+    });
 
-      return editors.Object.prototype.commit.call(this);
-    }
+    this._observeFormEvents();
 
-  });
+    //Render form
+    this.$el.html(this.nestedForm.render().el);
 
+    if (this.hasFocus) this.trigger('blur', this);
 
+    return this;
+  },
 
   /**
-   * DATE
-   *
-   * Schema options
-   * @param {Number|String} [options.schema.yearStart]  First year in list. Default: 100 years ago
-   * @param {Number|String} [options.schema.yearEnd]    Last year in list. Default: current year
+   * Update the embedded model, checking for nested validation errors and pass them up
+   * Then update the main model if all OK
    *
-   * Config options (if not set, defaults to options stored on the main Date class)
-   * @param {Boolean} [options.showMonthNames]  Use month names instead of numbers. Default: true
-   * @param {String[]} [options.monthNames]     Month names. Default: Full English names
+   * @return {Error|null} Validation error or null
    */
-  editors.Date = editors.Base.extend({
+  commit: function() {
+    var error = this.nestedForm.commit();
+    if (error) {
+      this.$el.addClass('error');
+      return error;
+    }
 
-    events: {
-      'change select':  function() {
-        this.updateHidden();
-        this.trigger('change', this);
-      },
-      'focus select':   function() {
-        if (this.hasFocus) return;
-        this.trigger('focus', this);
-      },
-      'blur select':    function() {
-        if (!this.hasFocus) return;
-        var self = this;
-        setTimeout(function() {
-          if (self.$('select:focus')[0]) return;
-          self.trigger('blur', self);
-        }, 0);
-      }
-    },
+    return Form.editors.Object.prototype.commit.call(this);
+  }
 
-    initialize: function(options) {
-      options = options || {};
+});
 
-      editors.Base.prototype.initialize.call(this, options);
+/**
+ * Date editor
+ *
+ * Schema options
+ * @param {Number|String} [options.schema.yearStart]  First year in list. Default: 100 years ago
+ * @param {Number|String} [options.schema.yearEnd]    Last year in list. Default: current year
+ *
+ * Config options (if not set, defaults to options stored on the main Date class)
+ * @param {Boolean} [options.showMonthNames]  Use month names instead of numbers. Default: true
+ * @param {String[]} [options.monthNames]     Month names. Default: Full English names
+ */
+Form.editors.Date = Form.editors.Base.extend({
 
-      var Self = editors.Date,
-          today = new Date();
+  events: {
+    'change select':  function() {
+      this.updateHidden();
+      this.trigger('change', this);
+    },
+    'focus select':   function() {
+      if (this.hasFocus) return;
+      this.trigger('focus', this);
+    },
+    'blur select':    function() {
+      if (!this.hasFocus) return;
+      var self = this;
+      setTimeout(function() {
+        if (self.$('select:focus')[0]) return;
+        self.trigger('blur', self);
+      }, 0);
+    }
+  },
 
-      //Option defaults
-      this.options = _.extend({
-        monthNames: Self.monthNames,
-        showMonthNames: Self.showMonthNames
-      }, options);
+  initialize: function(options) {
+    options = options || {};
 
-      //Schema defaults
-      this.schema = _.extend({
-        yearStart: today.getFullYear() - 100,
-        yearEnd: today.getFullYear()
-      }, options.schema || {});
+    Form.editors.Base.prototype.initialize.call(this, options);
 
-      //Cast to Date
-      if (this.value && !_.isDate(this.value)) {
-        this.value = new Date(this.value);
-      }
+    var Self = Form.editors.Date,
+        today = new Date();
 
-      //Set default date
-      if (!this.value) {
-        var date = new Date();
-        date.setSeconds(0);
-        date.setMilliseconds(0);
+    //Option defaults
+    this.options = _.extend({
+      monthNames: Self.monthNames,
+      showMonthNames: Self.showMonthNames
+    }, options);
 
-        this.value = date;
-      }
-    },
+    //Schema defaults
+    this.schema = _.extend({
+      yearStart: today.getFullYear() - 100,
+      yearEnd: today.getFullYear()
+    }, options.schema || {});
 
-    render: function() {
-      var options = this.options,
-          schema = this.schema;
+    //Cast to Date
+    if (this.value && !_.isDate(this.value)) {
+      this.value = new Date(this.value);
+    }
 
-      var datesOptions = _.map(_.range(1, 32), function(date) {
-        return '<option value="'+date+'">' + date + '</option>';
-      });
+    //Set default date
+    if (!this.value) {
+      var date = new Date();
+      date.setSeconds(0);
+      date.setMilliseconds(0);
 
-      var monthsOptions = _.map(_.range(0, 12), function(month) {
-        var value = options.showMonthNames ? options.monthNames[month] : (month + 1);
-        return '<option value="'+month+'">' + value + '</option>';
-      });
+      this.value = date;
+    }
 
-      var yearRange = schema.yearStart < schema.yearEnd ?
-        _.range(schema.yearStart, schema.yearEnd + 1) :
-        _.range(schema.yearStart, schema.yearEnd - 1, -1);
-      var yearsOptions = _.map(yearRange, function(year) {
-        return '<option value="'+year+'">' + year + '</option>';
-      });
+    //Template
+    this.template = options.template || this.constructor.template;
+  },
 
-      //Render the selects
-      var $el = Form.helpers.parseHTML(Form.templates.date({
-        dates: datesOptions.join(''),
-        months: monthsOptions.join(''),
-        years: yearsOptions.join('')
-      }));
+  render: function() {
+    var options = this.options,
+        schema = this.schema;
 
-      //Store references to selects
-      this.$date = $el.find('select[data-type="date"]');
-      this.$month = $el.find('select[data-type="month"]');
-      this.$year = $el.find('select[data-type="year"]');
+    var datesOptions = _.map(_.range(1, 32), function(date) {
+      return '<option value="'+date+'">' + date + '</option>';
+    });
 
-      //Create the hidden field to store values in case POSTed to server
-      this.$hidden = $('<input type="hidden" name="'+this.key+'" />');
-      $el.append(this.$hidden);
+    var monthsOptions = _.map(_.range(0, 12), function(month) {
+      var value = (options.showMonthNames)
+          ? options.monthNames[month]
+          : (month + 1);
 
-      //Set value on this and hidden field
-      this.setValue(this.value);
+      return '<option value="'+month+'">' + value + '</option>';
+    });
 
-      //Remove the wrapper tag
-      this.setElement($el);
-      this.$el.attr('id', this.id);
+    var yearRange = (schema.yearStart < schema.yearEnd)
+      ? _.range(schema.yearStart, schema.yearEnd + 1)
+      : _.range(schema.yearStart, schema.yearEnd - 1, -1);
 
-      if (this.hasFocus) this.trigger('blur', this);
+    var yearsOptions = _.map(yearRange, function(year) {
+      return '<option value="'+year+'">' + year + '</option>';
+    });
 
-      return this;
-    },
+    //Render the selects
+    var $el = $($.trim(this.template({
+      dates: datesOptions.join(''),
+      months: monthsOptions.join(''),
+      years: yearsOptions.join('')
+    })));
 
-    /**
-    * @return {Date}   Selected date
-    */
-    getValue: function() {
-      var year = this.$year.val(),
-          month = this.$month.val(),
-          date = this.$date.val();
+    //Store references to selects
+    this.$date = $el.find('[data-type="date"]');
+    this.$month = $el.find('[data-type="month"]');
+    this.$year = $el.find('[data-type="year"]');
 
-      if (!year || !month || !date) return null;
+    //Create the hidden field to store values in case POSTed to server
+    this.$hidden = $('<input type="hidden" name="'+this.key+'" />');
+    $el.append(this.$hidden);
 
-      return new Date(year, month, date);
-    },
+    //Set value on this and hidden field
+    this.setValue(this.value);
 
-    /**
-     * @param {Date} date
-     */
-    setValue: function(date) {
-      this.$date.val(date.getDate());
-      this.$month.val(date.getMonth());
-      this.$year.val(date.getFullYear());
+    //Remove the wrapper tag
+    this.setElement($el);
+    this.$el.attr('id', this.id);
+    this.$el.attr('name', this.getName());
 
-      this.updateHidden();
-    },
+    if (this.hasFocus) this.trigger('blur', this);
 
-    focus: function() {
-      if (this.hasFocus) return;
+    return this;
+  },
 
-      this.$('select').first().focus();
-    },
+  /**
+   * @return {Date}   Selected date
+   */
+  getValue: function() {
+    var year = this.$year.val(),
+        month = this.$month.val(),
+        date = this.$date.val();
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    if (!year || !month || !date) return null;
 
-      this.$('select:focus').blur();
-    },
+    return new Date(year, month, date);
+  },
 
-    /**
-     * Update the hidden input which is maintained for when submitting a form
-     * via a normal browser POST
-     */
-    updateHidden: function() {
-      var val = this.getValue();
-      if (_.isDate(val)) val = val.toISOString();
+  /**
+   * @param {Date} date
+   */
+  setValue: function(date) {
+    this.$date.val(date.getDate());
+    this.$month.val(date.getMonth());
+    this.$year.val(date.getFullYear());
 
-      this.$hidden.val(val);
-    }
+    this.updateHidden();
+  },
 
-  }, {
-    //STATICS
+  focus: function() {
+    if (this.hasFocus) return;
 
-    //Whether to show month names instead of numbers
-    showMonthNames: true,
+    this.$('select').first().focus();
+  },
 
-    //Month names to use if showMonthNames is true
-    //Replace for localisation, e.g. Form.editors.Date.monthNames = ['Janvier', 'Fevrier'...]
-    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-  });
+  blur: function() {
+    if (!this.hasFocus) return;
 
+    this.$('select:focus').blur();
+  },
 
   /**
-   * DATETIME
-   *
-   * @param {Editor} [options.DateEditor]           Date editor view to use (not definition)
-   * @param {Number} [options.schema.minsInterval]  Interval between minutes. Default: 15
+   * Update the hidden input which is maintained for when submitting a form
+   * via a normal browser POST
    */
-  editors.DateTime = editors.Base.extend({
+  updateHidden: function() {
+    var val = this.getValue();
 
-    events: {
-      'change select':  function() {
-        this.updateHidden();
-        this.trigger('change', this);
-      },
-      'focus select':   function() {
-        if (this.hasFocus) return;
-        this.trigger('focus', this);
-      },
-      'blur select':    function() {
-        if (!this.hasFocus) return;
-        var self = this;
-        setTimeout(function() {
-          if (self.$('select:focus')[0]) return;
-          self.trigger('blur', self);
-        }, 0);
-      }
-    },
+    if (_.isDate(val)) val = val.toISOString();
 
-    initialize: function(options) {
-      options = options || {};
+    this.$hidden.val(val);
+  }
 
-      editors.Base.prototype.initialize.call(this, options);
+}, {
+  //STATICS
+  template: _.template('\
+    <div>\
+      <select data-type="date"><%= dates %></select>\
+      <select data-type="month"><%= months %></select>\
+      <select data-type="year"><%= years %></select>\
+    </div>\
+  ', null, Form.templateSettings),
 
-      //Option defaults
-      this.options = _.extend({
-        DateEditor: editors.DateTime.DateEditor
-      }, options);
+  //Whether to show month names instead of numbers
+  showMonthNames: true,
 
-      //Schema defaults
-      this.schema = _.extend({
-        minsInterval: 15
-      }, options.schema || {});
+  //Month names to use if showMonthNames is true
+  //Replace for localisation, e.g. Form.editors.Date.monthNames = ['Janvier', 'Fevrier'...]
+  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+});
 
-      //Create embedded date editor
-      this.dateEditor = new this.options.DateEditor(options);
+/**
+ * DateTime editor
+ *
+ * @param {Editor} [options.DateEditor]           Date editor view to use (not definition)
+ * @param {Number} [options.schema.minsInterval]  Interval between minutes. Default: 15
+ */
+Form.editors.DateTime = Form.editors.Base.extend({
 
-      this.value = this.dateEditor.value;
+  events: {
+    'change select':  function() {
+      this.updateHidden();
+      this.trigger('change', this);
     },
+    'focus select':   function() {
+      if (this.hasFocus) return;
+      this.trigger('focus', this);
+    },
+    'blur select':    function() {
+      if (!this.hasFocus) return;
+      var self = this;
+      setTimeout(function() {
+        if (self.$('select:focus')[0]) return;
+        self.trigger('blur', self);
+      }, 0);
+    }
+  },
 
-    render: function() {
-      function pad(n) {
-        return n < 10 ? '0' + n : n;
-      }
-
-      var schema = this.schema;
-
-      //Create options
-      var hoursOptions = _.map(_.range(0, 24), function(hour) {
-        return '<option value="'+hour+'">' + pad(hour) + '</option>';
-      });
-
-      var minsOptions = _.map(_.range(0, 60, schema.minsInterval), function(min) {
-        return '<option value="'+min+'">' + pad(min) + '</option>';
-      });
+  initialize: function(options) {
+    options = options || {};
 
-      //Render time selects
-      var $el = Form.helpers.parseHTML(Form.templates.dateTime({
-        date: '<b class="bbf-tmp"></b>',
-        hours: hoursOptions.join(),
-        mins: minsOptions.join()
-      }));
+    Form.editors.Base.prototype.initialize.call(this, options);
 
-      //Include the date editor
-      $el.find('.bbf-tmp').replaceWith(this.dateEditor.render().el);
+    //Option defaults
+    this.options = _.extend({
+      DateEditor: Form.editors.DateTime.DateEditor
+    }, options);
 
-      //Store references to selects
-      this.$hour = $el.find('select[data-type="hour"]');
-      this.$min = $el.find('select[data-type="min"]');
+    //Schema defaults
+    this.schema = _.extend({
+      minsInterval: 15
+    }, options.schema || {});
 
-      //Get the hidden date field to store values in case POSTed to server
-      this.$hidden = $el.find('input[type="hidden"]');
+    //Create embedded date editor
+    this.dateEditor = new this.options.DateEditor(options);
 
-      //Set time
-      this.setValue(this.value);
+    this.value = this.dateEditor.value;
 
-      this.setElement($el);
-      this.$el.attr('id', this.id);
+    //Template
+    this.template = options.template || this.constructor.template;
+  },
 
-      if (this.hasFocus) this.trigger('blur', this);
+  render: function() {
+    function pad(n) {
+      return n < 10 ? '0' + n : n;
+    }
 
-      return this;
-    },
+    var schema = this.schema;
 
-    /**
-    * @return {Date}   Selected datetime
-    */
-    getValue: function() {
-      var date = this.dateEditor.getValue();
+    //Create options
+    var hoursOptions = _.map(_.range(0, 24), function(hour) {
+      return '<option value="'+hour+'">' + pad(hour) + '</option>';
+    });
 
-      var hour = this.$hour.val(),
-          min = this.$min.val();
+    var minsOptions = _.map(_.range(0, 60, schema.minsInterval), function(min) {
+      return '<option value="'+min+'">' + pad(min) + '</option>';
+    });
 
-      if (!date || !hour || !min) return null;
+    //Render time selects
+    var $el = $($.trim(this.template({
+      hours: hoursOptions.join(),
+      mins: minsOptions.join()
+    })));
 
-      date.setHours(hour);
-      date.setMinutes(min);
+    //Include the date editor
+    $el.find('[data-date]').append(this.dateEditor.render().el);
 
-      return date;
-    },
+    //Store references to selects
+    this.$hour = $el.find('select[data-type="hour"]');
+    this.$min = $el.find('select[data-type="min"]');
 
-    setValue: function(date) {
-      if (!_.isDate(date)) date = new Date(date);
+    //Get the hidden date field to store values in case POSTed to server
+    this.$hidden = $el.find('input[type="hidden"]');
 
-      this.dateEditor.setValue(date);
+    //Set time
+    this.setValue(this.value);
 
-      this.$hour.val(date.getHours());
-      this.$min.val(date.getMinutes());
+    this.setElement($el);
+    this.$el.attr('id', this.id);
+    this.$el.attr('name', this.getName());
 
-      this.updateHidden();
-    },
+    if (this.hasFocus) this.trigger('blur', this);
 
-    focus: function() {
-      if (this.hasFocus) return;
+    return this;
+  },
 
-      this.$('select').first().focus();
-    },
+  /**
+   * @return {Date}   Selected datetime
+   */
+  getValue: function() {
+    var date = this.dateEditor.getValue();
 
-    blur: function() {
-      if (!this.hasFocus) return;
+    var hour = this.$hour.val(),
+        min = this.$min.val();
 
-      this.$('select:focus').blur();
-    },
+    if (!date || !hour || !min) return null;
 
-    /**
-     * Update the hidden input which is maintained for when submitting a form
-     * via a normal browser POST
-     */
-    updateHidden: function() {
-      var val = this.getValue();
-      if (_.isDate(val)) val = val.toISOString();
+    date.setHours(hour);
+    date.setMinutes(min);
 
-      this.$hidden.val(val);
-    },
+    return date;
+  },
 
-    /**
-     * Remove the Date editor before removing self
-     */
-    remove: function() {
-      this.dateEditor.remove();
+  /**
+   * @param {Date}
+   */
+  setValue: function(date) {
+    if (!_.isDate(date)) date = new Date(date);
 
-      editors.Base.prototype.remove.call(this);
-    }
+    this.dateEditor.setValue(date);
 
-  }, {
-    //STATICS
+    this.$hour.val(date.getHours());
+    this.$min.val(date.getMinutes());
 
-    //The date editor to use (constructor function, not instance)
-    DateEditor: editors.Date
-  });
+    this.updateHidden();
+  },
 
-  return editors;
+  focus: function() {
+    if (this.hasFocus) return;
 
-})();
+    this.$('select').first().focus();
+  },
 
+  blur: function() {
+    if (!this.hasFocus) return;
 
-  //SETUP
-  
-  //Add function shortcuts
-  Form.setTemplates = Form.helpers.setTemplates;
-  Form.setTemplateCompiler = Form.helpers.setTemplateCompiler;
+    this.$('select:focus').blur();
+  },
 
-  Form.templates = {};
+  /**
+   * Update the hidden input which is maintained for when submitting a form
+   * via a normal browser POST
+   */
+  updateHidden: function() {
+    var val = this.getValue();
+    if (_.isDate(val)) val = val.toISOString();
 
+    this.$hidden.val(val);
+  },
 
-  //DEFAULT TEMPLATES
-  Form.setTemplates({
-    
-    //HTML
-    form: '\
-      <form class="bbf-form">{{fieldsets}}</form>\
-    ',
-    
-    fieldset: '\
-      <fieldset>\
-        <legend>{{legend}}</legend>\
-        <ul>{{fields}}</ul>\
-      </fieldset>\
-    ',
-    
-    field: '\
-      <li class="bbf-field field-{{key}}">\
-        <label for="{{id}}">{{title}}</label>\
-        <div class="bbf-editor">{{editor}}</div>\
-        <div class="bbf-help">{{help}}</div>\
-        <div class="bbf-error">{{error}}</div>\
-      </li>\
-    ',
-
-    nestedField: '\
-      <li class="bbf-field bbf-nested-field field-{{key}}" title="{{title}}">\
-        <label for="{{id}}">{{title}}</label>\
-        <div class="bbf-editor">{{editor}}</div>\
-        <div class="bbf-help">{{help}}</div>\
-        <div class="bbf-error">{{error}}</div>\
-      </li>\
-    ',
-
-    list: '\
-      <div class="bbf-list">\
-        <ul>{{items}}</ul>\
-        <div class="bbf-actions"><button type="button" data-action="add">Add</div>\
-      </div>\
-    ',
-
-    listItem: '\
-      <li>\
-        <button type="button" data-action="remove" class="bbf-remove">&times;</button>\
-        <div class="bbf-editor-container">{{editor}}</div>\
-      </li>\
-    ',
-
-    date: '\
-      <div class="bbf-date">\
-        <select data-type="date" class="bbf-date">{{dates}}</select>\
-        <select data-type="month" class="bbf-month">{{months}}</select>\
-        <select data-type="year" class="bbf-year">{{years}}</select>\
-      </div>\
-    ',
-
-    dateTime: '\
-      <div class="bbf-datetime">\
-        <div class="bbf-date-container">{{date}}</div>\
-        <select data-type="hour">{{hours}}</select>\
-        :\
-        <select data-type="min">{{mins}}</select>\
-      </div>\
-    ',
+  /**
+   * Remove the Date editor before removing self
+   */
+  remove: function() {
+    this.dateEditor.remove();
 
-    'list.Modal': '\
-      <div class="bbf-list-modal">\
-        {{summary}}\
-      </div>\
-    '
-  }, {
+    Form.editors.Base.prototype.remove.call(this);
+  }
 
-    //CLASSNAMES
-    error: 'bbf-error'
+}, {
+  //STATICS
+  template: _.template('\
+    <div class="bbf-datetime">\
+      <div class="bbf-date-container" data-date></div>\
+      <select data-type="hour"><%= hours %></select>\
+      :\
+      <select data-type="min"><%= mins %></select>\
+    </div>\
+  ', null, Form.templateSettings),
 
-  });
+  //The date editor to use (constructor function, not instance)
+  DateEditor: Form.editors.Date
+});
 
 
 
   //Metadata
-  Form.VERSION = '0.11.0';
+  Form.VERSION = '0.12.0';
 
 
   //Exports