Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+24 −16
Open

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f44a81
Add Form.NestedForm to allow custom overriding template for nested forms
rjmackay Oct 10, 2013
406e145
Move initialization of nestedForm to initialize to ensure its always …
rjmackay Oct 28, 2013
0fcae7d
Use NestedForm template on NestedModel editor too
rjmackay Jun 27, 2014
f7e8fc7
Remove 'form-control' classes from Object and NestedForm editors
rjmackay Jun 27, 2014
d074184
Include nestedForm in test runner
rjmackay Jun 27, 2014
4f068a5
Fix Object and NestedModel setValue() tests
rjmackay Jun 27, 2014
06ca9af
Remove NestedModel.render() - its now inherited from Object.render()
rjmackay Jun 27, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions scripts/build
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ var fileList = [
'fieldset.js',
'field.js',
'nestedField.js',
'nestedForm.js',
'editor.js',
'editors/text.js',
'editors/textarea.js',
Expand Down
7 changes: 4 additions & 3 deletions src/editors/nestedmodel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -30,6 +28,9 @@ Form.editors.NestedModel = Form.editors.Object.extend({
idPrefix: this.id + '_',
fieldTemplate: 'nestedField'
});
},

render: function() {

this._observeFormEvents();

Expand Down
7 changes: 4 additions & 3 deletions src/editors/object.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -35,6 +33,9 @@ Form.editors.Object = Form.editors.Base.extend({
idPrefix: this.id + '_',
Field: NestedForm.NestedField
});
},

render: function() {

this._observeFormEvents();

Expand Down
1 change: 1 addition & 0 deletions src/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
12 changes: 12 additions & 0 deletions src/nestedForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

//==================================================================================================
//NESTEDFIELD
//==================================================================================================

Form.NestedForm = Form.extend({

template: _.template('\
<span data-fieldsets></span>\
', null, Form.templateSettings)

});
3 changes: 3 additions & 0 deletions src/templates/bootstrap3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@
');

Form.editors.Base.prototype.className = 'form-control';
Form.editors.Object.prototype.className = '';
Form.editors.NestedModel.prototype.className = '';
Copy link
Contributor Author

@rjmackay rjmackay Jun 27, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure this is correct. I don't know enough about bootstrap, or have anywhere setup to test. @fonji maybe you could confirm?

Copy link
Contributor

@fonji fonji Jun 27, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I confirm it works and is nicer than my solution.
Please ask if you want details about those lines.

I still think there's some work to do on those templates, especially for the object type, as the fields titles are hidden.
Here's a fiddle.


Form.Field.errorClassName = 'has-error';


Expand Down