-
Notifications
You must be signed in to change notification settings - Fork 414
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.
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
Add Form.NestForm template to allow different theming for nested forms used in Object editor #392
base: master
Are you sure you want to change the base?
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.
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?
There was a problem hiding this comment.
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.
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.