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>