如何在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不喜欢这样.它只显示了行子.所以我不确定从哪里开始.我正在考虑两种策略,但还没有详细介绍.

前进:计划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，但我相信它应该优雅地处理它们。