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

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

这在没有由此调用的自定义模板的情况下正确显示:

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

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

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

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

谢谢

更新:Js Fiddle附上赞

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

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

更新:

Tommi Komulainen 的回答非常接近 Here ，描述实际上是在第一个边界 div 而不是第二个。我怎样才能把这个移到第二个？

更新 2:

我正在调用当前每个嵌套项的渲染，并在主渲染之后像这样注入(inject)回来

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

目前这是可行的，但感觉不是一个“好的”解决方案

Answer 1

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