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

[rjmackay]

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.

[philfreo]

+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 src/editors/nestedmodel.js

Doing this also makes it super easy to have a nice InlineNestedModel List Item editor -- rather than having it use a Modal.

[fonji]

+1 I need that!

[powmedia]

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

[fonji]

I believe this implies a small modification of the bootstrap3 templates.
For example,

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';
};

[rjmackay]

@fonji except NestedModel doesn't set hasNestedForm so I'm not sure that works? Maybe I should just unset className for specific editor types?

[rjmackay]

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?

[fonji]

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.

[rjmackay]

Updated to fix unit tests, and simplified NestedModel while at it.
I did run into some issues running tests in Firefox, so maybe someone else could double check that?

[fonji]

@rjmackay Will do.

[fonji]

I had errors with every browser I used for the tests (firefox on linux and windows, chromium on linux, safari on windows and IE).
I don't have the time to debug now, sorry.

[philfreo]

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 InlineNestedModel like in the jsfiddle above

[fonji]

I tried testing once more and have good news: tests actually works on most tested browsers.
I still have trouble with... IE, for a change. I'll keep you guys up to date when I found what's bothering it.
Edit: IE tests failing aren't related to this merge. See my next comment.

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 git remote. Shame on me.
Edit: I know why I am an idiot. I cloned the master branch. Very usefull...

[fonji]

The problems with IE are focus and blur-related and have nothing to do with these changes.
They also happen with powmedia/backbone-forms/master.

[fonji]

I made a small change to allow each instance and subclass to set their own NestedForm and NestedField class.
I'm not sure it's usefull so I didn't write any tests yet. Please let me know if you're interested, I'll write some and create a pull request to @rjmackay's version.

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.

[slackjaw]

+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.