如何在 Backbone Marionette 中显示具有多个子视图的 CompositeView

起始问题

我有一个 CompositeView （一个表），集合中的每个模型都表示为两个表行，模板如下：

<tr class="row-parent">
    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>
</tr>

使用这样的 ItemView：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl
});

尽管它们被命名为“父”和“子”，但它们实际上是同一模型的同级成员。如果我不指定 tagName，Backbone 会将每个视图包装在<div>这既是无效的 HTML，也破坏了布局。

第一次尝试解决方案

所以我想，为什么不去掉外面的<tr>标签并让 Backbone 添加它们。所以我将模板更新为：

    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>

并将视图更新为：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tr',
    className: 'row-parent'
});

我希望外部标签能够与内部标签片段结合在一起，但 Marionette 不喜欢这样。它只显示了排行孩子。所以我不知道从这里该去哪里。我正在考虑两种策略，但尚未详细讨论。

前进：A计划

覆盖 Backbone 中创建额外 div 的任何部分以不创建它，或者覆盖 Marionette 中附加视图的部分以在附加之前删除 div。

前进：B 计划

创建一个名为 CompositeMultiView 的新视图类型，它自然会扩展 CompositeView 并允许您指定第二个 ItemView，或者可能只是一个视图数组，所有这些都将为给定的每个模型呈现。这个计划看起来工作量更大，但黑客攻击却更少。

对于我如何实施上述两个计划，有人有更好的建议、解决方法或具体指示吗？

Here is a mockup of what the table should look like:

我一直在解决同样的问题，直到今天我终于发现，一个表可以有多个tbody标签，每个标签包含多个tr tags.

这实际上是答案 https://stackoverflow.com/a/7071268/3335922提供给类似的骨干问题。

So your ItemView会成为：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tbody'
});

以及生成的html：

<table>
  <!-- first item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  <!-- second item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  ...
</table>