javascript - 如何在 Backbone Marionette 中显示具有多个 subview 的 CompositeView

Question

起始问题

我有一个 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
});

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

解决方案的第一次尝试

所以我想，为什么不删除外部 <tr>标签并让 Backbone 添加它们。所以我将模板更新为:

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

并将 View 更新为:

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

我希望外部标签可以与内部标签片段结合，但 Marionette 不喜欢这样。它只显示了 row-child。所以我不确定从这里去哪里。我正在考虑两种策略，但还没有详细介绍。

前进:A 计划

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

前进:B 计划

创建一个名为 CompositeMultiView 的新型 View ，它自然会扩展 CompositeView 并允许您指定第二个 ItemView，或者可能只是一个 View 数组，所有这些 View 都将为给定的每个模型呈现。这个计划似乎需要做更多的工作，但被黑客攻击的次数更少。

---

对于我将如何实现上述两个计划中的任何一个，是否有人有任何更好的建议、解决方法或具体指示？

下面是表格的模型:

Answer 1

直到今天我终于发现，一个表可以有多个 tbody 标签，每个标签包含多个 tr 标签，我一直在为同样的问题而苦苦挣扎。

这实际上是the answer提供给类似的 Backbone 问题。

所以你的 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>