如何在 Backbone Marionette 中显示具有多个子视图的 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
});

尽管它们被命名为“父”和“子”，但它们实际上是同一模型的对等成员。如果我不指定 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 不喜欢这样。它只显示了row-child。所以我不确定从这里去哪里。我正在考虑两种策略，但还没有详细说明。

前进：A 计划

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

前进：B 计划

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

---

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

下面是表格的样机：

Answer 1

您可以尝试如下修改 CompositeView：

1. 将itemView 指定为视图数组
2. 覆盖 addChildView 以呈现每个模型的每个视图

这个解决方案最终看起来很像您的“B 计划”。试一试：

itemView: [My.ParentView, My.ChildView],

addChildView: function(item, collection, options){
  this.closeEmptyView();
  var itemViews = this.getItemView(item);
  var index = this.collection.indexOf(item);

  _.each(itemViews, function(ItemView) {
    this.addItemView(item, ItemView, index);
  });
}

我还没有考虑过这是否会处理诸如destroy 之类的模型事件，但我相信它应该能够优雅地处理它们。

Answer 2

肮脏的解决方案：向您的 ItemView 添加自定义渲染函数

// Or whatever template you use
var template = Handlebars.compile(datepickerTemplate);

var ItemView = Backbone.Marionette.ItemView.extend({
    render: function(){
        var html = template(this.model.toJSON());
        var newElement = $(html);
        this.$el.replaceWith(newElement);
        this.setElement(newElement);
        return this;
    }
});

这应该删除额外的 div 包装

Answer 3

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

这实际上是 the answer 提供给一个类似的主干问题。

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