Add Form.NestForm template to allow different theming for nested forms used in Object editor #392
Conversation
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.
…present Otherwise we get errors when validating fields that weren't rendered
|
+1 this is a great way to do it - I've done similar things in 2 different projects However you need to make the same logic in Doing this also makes it super easy to have a nice InlineNestedModel List Item editor -- rather than having it use a Modal. |
|
+1 I need that! |
|
Looks like a much needed improvement however I've got several tests failing with these changes; is are you able to update these? After the merge would be great to simplify the list editor so modals aren't required as @philfreo says |
|
I believe this implies a small modification of the bootstrap3 templates. Form.editors.Base.prototype.className = 'form-control';should be replaced by something similar to this: Form.editors.Base.prototype.className = function() {
if (this.hasNestedForm)
return '';
return 'form-control';
}; |
|
@fonji except NestedModel doesn't set |
| @@ -44,6 +44,9 @@ | |||
| '); | |||
|
|
|||
| Form.editors.Base.prototype.className = 'form-control'; | |||
| Form.editors.Object.prototype.className = ''; | |||
| Form.editors.NestedModel.prototype.className = ''; | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
|
Updated to fix unit tests, and simplified NestedModel while at it. |
|
@rjmackay Will do. |
|
I had errors with every browser I used for the tests (firefox on linux and windows, chromium on linux, safari on windows and IE). |
|
Here's an example of using this with a List editor now http://jsfiddle.net/dW2Qu/484/ Either we should get rid of the Modal adapters or we should add an |
|
I tried testing once more and have good news: tests actually works on most tested browsers. Bad news is: I'm an idiot. I git-cloned an old version of @rjmackay's repository and that's why it didn't work. I guess I forgot how to |
|
The problems with IE are focus and blur-related and have nothing to do with these changes. |
|
I made a small change to allow each instance and subclass to set their own NestedForm and NestedField class. Edit: usage example: Backbone.Form.editors.List.InlineObject = Backbone.Form.editors.Object.extend({});
Backbone.Form.editors.List.InlineObject.NestedField = Backbone.Form.Field;So the applied template is the same. |
|
+1. I could put this utility to use right away - but how specify the template for the nestedmodel? I need an inline list of objects, like in @philfreo's fiddle, but I need to style it with a template. |
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 generates valid HTML, but leaves the flexibility to tweak the nested form template if needed.