Backbone.Marionette：使用Collection渲染两个可伪列的列

Question

我想渲染这样的结构：

<div>
  <div class="table h-mb-10">
    <div class="table-cell">#{rendered cellview</div>
    <div class="table-cell">#{rendered cellview</div>
  </div>
  <div class="table h-mb-10">
    <div class="table-cell">#{rendered cellview</div>
    <div class="table-cell">#{rendered cellview</div>
  </div>
</div>

我创建了两个视图：

class CellView extends Marionette.ItemView
  tagName: 'div'
  className: 'table-cell'

class TableCollectionView extends Marionette.CollectionView
  appendHtml: (collectionView, itemView, index)->
    if index % 2 is 0 
      @_lastRow = $('<div class="table h-mb-10"></div>')
      collectionView.$el.append(@_lastRow)
    @_lastRow.append(itemView.el)
  itemView: CellView

它可以工作，但是当我重置一个集合时，会有一些备用块。像这样：

 <div>
      <div class="table h-mb-10"></div> <!-- spare -->
      <div class="table h-mb-10"></div> <!-- spare -->
      <div class="table h-mb-10">
        <div class="table-cell">#{rendered cellview}</div>
        <div class="table-cell">#{rendered cellview}</div>
      </div>
      <div class="table h-mb-10">
        <div class="table-cell">#{rendered cellview}</div>
        <div class="table-cell">#{rendered cellview}</div>
      </div>
 </div>

我可以在渲染中删除它们，但这是一种黑客攻击。有（以木偶）的惯用方式来解决这个问题吗？

编辑：它呈现类似这样的内容

Answer 1

使用Marionette.CompositeView代替Marionette.CollectionView。这将允许您指定具有2个容器的模板并覆盖appendHtml方法以决定在何处呈现itemView（就像您现在一样）。

覆盖appendHtml的一个问题是，在渲染集合时（即重置集合后），您将无法利用缓冲。如果你有很多项目，这可能是一个问题，因为逐个添加它们是非常慢的。