From 9f44a8183e3d70cf0b40d97ed4f40f5b35ce6c7b Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 11 Oct 2013 09:22:40 +1300 Subject: [PATCH 1/7] Add Form.NestedForm to allow custom overriding template for nested forms Adds Form.NestedForm and uses it in editors/Object. NestedForm extends Form but uses a different template which doesn't have a form tag. This means we're now generating valid HTML. --- scripts/build | 1 + src/editors/object.js | 2 +- src/form.js | 1 + src/nestedForm.js | 12 ++++++++++++ 4 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/nestedForm.js diff --git a/scripts/build b/scripts/build index 8c17f9a2..efbd78fc 100755 --- a/scripts/build +++ b/scripts/build @@ -18,6 +18,7 @@ var fileList = [ 'fieldset.js', 'field.js', 'nestedField.js', + 'nestedForm.js', 'editor.js', 'editors/text.js', 'editors/textarea.js', diff --git a/src/editors/object.js b/src/editors/object.js index 4266f487..66fd41c9 100644 --- a/src/editors/object.js +++ b/src/editors/object.js @@ -26,7 +26,7 @@ Form.editors.Object = Form.editors.Base.extend({ 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({ diff --git a/src/form.js b/src/form.js index 46a36d17..70cab153 100644 --- a/src/form.js +++ b/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); diff --git a/src/nestedForm.js b/src/nestedForm.js new file mode 100644 index 00000000..6c8a8854 --- /dev/null +++ b/src/nestedForm.js @@ -0,0 +1,12 @@ + +//================================================================================================== +//NESTEDFIELD +//================================================================================================== + +Form.NestedForm = Form.extend({ + + template: _.template('\ + \ + ', null, Form.templateSettings) + +}); From 406e1452d804e8d6c0c912b80a8c248a112230d6 Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Mon, 28 Oct 2013 13:08:09 +1300 Subject: [PATCH 2/7] Move initialization of nestedForm to initialize to ensure its always present Otherwise we get errors when validating fields that weren't rendered --- src/editors/object.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/editors/object.js b/src/editors/object.js index 66fd41c9..98968b90 100644 --- a/src/editors/object.js +++ b/src/editors/object.js @@ -22,9 +22,7 @@ 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.NestedForm; @@ -35,6 +33,9 @@ Form.editors.Object = Form.editors.Base.extend({ idPrefix: this.id + '_', Field: NestedForm.NestedField }); + }, + + render: function() { this._observeFormEvents(); From 0fcae7ddbc09162a34b03f4bdc3d902054b296b8 Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 27 Jun 2014 20:39:55 +1200 Subject: [PATCH 3/7] Use NestedForm template on NestedModel editor too --- src/editors/nestedmodel.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/editors/nestedmodel.js b/src/editors/nestedmodel.js index ebaac4e1..10939923 100644 --- a/src/editors/nestedmodel.js +++ b/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,6 +28,9 @@ Form.editors.NestedModel = Form.editors.Object.extend({ idPrefix: this.id + '_', fieldTemplate: 'nestedField' }); + }, + + render: function() { this._observeFormEvents(); From f7e8fc7acd280ba0433fa1082944e5a30985027d Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 27 Jun 2014 20:50:24 +1200 Subject: [PATCH 4/7] Remove 'form-control' classes from Object and NestedForm editors --- src/templates/bootstrap3.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/templates/bootstrap3.js b/src/templates/bootstrap3.js index d0305fc3..9bb3351e 100644 --- a/src/templates/bootstrap3.js +++ b/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'; From d0741841361b3178b3c0243af07968179e597ebf Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 27 Jun 2014 21:07:10 +1200 Subject: [PATCH 5/7] Include nestedForm in test runner --- test/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/test/index.html b/test/index.html index 2d81b448..7ee0fc54 100644 --- a/test/index.html +++ b/test/index.html @@ -25,6 +25,7 @@ + From 4f068a50756b041f67b19fc84ec3aadeafc1872d Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 27 Jun 2014 21:11:10 +1200 Subject: [PATCH 6/7] Fix Object and NestedModel setValue() tests --- src/editors/object.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editors/object.js b/src/editors/object.js index 98968b90..2dc0b852 100644 --- a/src/editors/object.js +++ b/src/editors/object.js @@ -55,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() { From 06ca9af531963ff1a9b160bb70ca7f01f57ccfb6 Mon Sep 17 00:00:00 2001 From: Robbie Mackay Date: Fri, 27 Jun 2014 21:11:52 +1200 Subject: [PATCH 7/7] Remove NestedModel.render() - its now inherited from Object.render() --- src/editors/nestedmodel.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/editors/nestedmodel.js b/src/editors/nestedmodel.js index 10939923..efea4213 100644 --- a/src/editors/nestedmodel.js +++ b/src/editors/nestedmodel.js @@ -30,18 +30,6 @@ Form.editors.NestedModel = Form.editors.Object.extend({ }); }, - render: function() { - - this._observeFormEvents(); - - //Render form - this.$el.html(this.nestedForm.render().el); - - if (this.hasFocus) this.trigger('blur', this); - - return this; - }, - /** * Update the embedded model, checking for nested validation errors and pass them up * Then update the main model if all OK