Backbone forms with nested models and custom template

Question

I'm currently using Backbone forms.

I currently have a schema which loads fine using nested models. When I try and style it with a template I don't get the expected results though.

The template is similar to the following:

<div class="bounding">
  <h2>Title1 </h2>
      <div data-fields="name,type"></div>
      <div data-fields="bedrooms"></div>
  </div>
  <div class="bounding">
      <h2>Title 2</h2>
      <div data-fields="description"></div>
  </div>

Bedrooms is defined in the schema as:

bedrooms: {
  type: 'NestedModel',
  model:Bedroom,
  editorAttrs: {
    class: 'bedrooms'
  }
}

This displays correctly without the custom template which is being called by this:

template: _.template($('#formTemplate').html())

and the custom template looks correct when this line is removed

<div data-fields="bedrooms"></div>

Is there a way I can use both the custom template and a Nested Model? The Nested model has no template defined, only the has a schema added.

Thanks

Update: Js Fiddle attached the like

//  template: _.template($('#formTemplate').html()),

should be toggled to see a working way and it not looking correct

UPDATE:

Tommi Komulainen was very close with his answer Here , the description is actually in the first bounding div though rather than the second. How can I move this to the second ?

UPDATE 2:

Im calling the render of each nested item currently and injecting back in after the main render like this

form.fields.bedrooms.render();
$('#bedrooms').html(form.fields.bedrooms.el);

This is currently working but doesnt feel like a "good" solution

Answer 1

Try adding a wrapper DIV tag around the whole of your template; templates need to have one main containing element.

Answer 2

I think that <div data-fields="bedrooms"></div>should be

<div data-fieldsets="bedrooms"></div>

instead.