Add Form.NestForm template to allow different theming for nested forms used in Object editor

scripts/build

@@ -18,6 +18,7 @@ var fileList = [
   'fieldset.js',
   'field.js',
   'nestedField.js',
+  'nestedForm.js',
   'editor.js',
   'editors/text.js',
   'editors/textarea.js',

src/editors/nestedmodel.js

@@ -12,11 +12,9 @@ Form.editors.NestedModel = Form.editors.Object.extend({
 
     if (!this.form) throw new Error('Missing required option "form"');
     if (!options.schema.model) throw new Error('Missing required "schema.model" option for NestedModel 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;
+    var NestedForm = this.form.NestedForm;
 
     var data = this.value || {},
         key = this.key,
@@ -30,15 +28,6 @@ Form.editors.NestedModel = Form.editors.Object.extend({
       idPrefix: this.id + '_',
       fieldTemplate: 'nestedField'
     });
-
-    this._observeFormEvents();
-
-    //Render form
-    this.$el.html(this.nestedForm.render().el);
-
-    if (this.hasFocus) this.trigger('blur', this);
-
-    return this;
   },
 
   /**

src/editors/object.js

@@ -22,11 +22,9 @@ Form.editors.Object = Form.editors.Base.extend({
     //Check required options
     if (!this.form) throw new Error('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;
+    var NestedForm = this.form.NestedForm;
 
     //Create the nested form
     this.nestedForm = new NestedForm({
@@ -35,6 +33,9 @@ Form.editors.Object = Form.editors.Base.extend({
       idPrefix: this.id + '_',
       Field: NestedForm.NestedField
     });
+  },
+
+  render: function() {
 
     this._observeFormEvents();
 
@@ -54,7 +55,7 @@ Form.editors.Object = Form.editors.Base.extend({
   setValue: function(value) {
     this.value = value;
 
-    this.render();
+    this.nestedForm.setValue(this.value);
   },
 
   focus: function() {

src/form.js

@@ -57,6 +57,7 @@ var Form = Backbone.View.extend({
     this.Fieldset = options.Fieldset || this.Fieldset || constructor.Fieldset;
     this.Field = options.Field || this.Field || constructor.Field;
     this.NestedField = options.NestedField || this.NestedField || constructor.NestedField;
+    this.NestedForm = options.NestedForm || this.NestedForm || constructor.NestedForm;
 
     //Check which fields will be included (defaults to all)
     var selectedFields = this.selectedFields = options.fields || _.keys(schema);

src/nestedForm.js

@@ -0,0 +1,12 @@
+
+//==================================================================================================
+//NESTEDFIELD
+//==================================================================================================
+
+Form.NestedForm = Form.extend({
+
+  template: _.template('\
+    <span data-fieldsets></span>\
+  ', null, Form.templateSettings)
+
+});

src/templates/bootstrap3.js

@@ -44,6 +44,9 @@
   ');
 
   Form.editors.Base.prototype.className = 'form-control';
+  Form.editors.Object.prototype.className = '';
+  Form.editors.NestedModel.prototype.className = '';
+
   Form.Field.errorClassName = 'has-error';
 
 

test/index.html

@@ -25,6 +25,7 @@
   <script src="../src/fieldset.js"></script>
   <script src="../src/field.js"></script>
   <script src="../src/nestedField.js"></script>
+  <script src="../src/nestedForm.js"></script>
   <script src="../src/editor.js"></script>
 
   <script src="../src/editors/text.js"></script>