具有嵌套模型和自定义模板的主干表单

Question

我目前使用的是Backbone表单。

我目前有一个使用嵌套模型加载良好的模式。当我尝试用模板样式化它时，我没有得到预期的结果。

模板类似如下:

<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: {
  type: 'NestedModel',
  model:Bedroom,
  editorAttrs: {
    class: 'bedrooms'
  }
}

不需要调用自定义模板就能正确显示:

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

和自定义模板看起来正确，当这行被删除

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

是否有一种方法可以同时使用自定义模板和嵌套模型?嵌套模型没有定义模板，只有添加了模式。

感谢

Update: Js Fiddle附加了like

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

应该切换到一个工作方式，它看起来不正确

更新:

Tommi Komulainen与他的答案非常接近，这里的描述实际上是在第一个边界div中，而不是第二个。我怎么把这个移到第二个呢?

更新2:

我当前调用每个嵌套项的渲染，并在主渲染后注入，像这样

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

这是目前工作，但感觉不是一个"好的"解决方案

Answer 1

尝试在整个模板周围添加包装器div标签;模板需要有一个主包含元素。

Answer 2

我认为<div data-fields="bedrooms"></div>应该是

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

。