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

Question

我目前正在使用Backbone forms。

我目前有一个使用嵌套模型可以很好地加载的架构。当我尝试使用模板设置样式时，我没有得到预期的结果。

模板类似如下：

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

这在没有被 this 调用的自定义模板的情况下正确显示：

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

删除此行后自定义模板看起来正确

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

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

谢谢

更新：Js Fiddle 附上点赞

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

应该切换以查看工作方式，但它看起来不正确

更新：

Tommi Komulainen 非常接近他的答案 Here ，但描述实际上是在第一个边界 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>

改为。