Javascript 木偶：使用集合呈现两列伪表

我希望呈现如下结构：

<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>

 <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>

#{渲染单元视图
#{渲染单元视图
#{渲染单元视图
#{渲染单元视图

我创建了以下两个视图：

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

class CellView扩展了Marionette.ItemView
标记名：“div”
类名：“表单元格”
类TableCollectionView扩展了Marionette.CollectionView
附录HTML：（collectionView、itemView、index）->
如果索引%2为0
@_lastRow=$（''）
collectionView.$el.append（@_lastRow）
@_追加（itemView.el）
项目视图：CellView

它可以工作，但当我重置集合时，会有最后一些备用块。类似于以下内容：

<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>

 <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>

#{渲染的cellview}
#{渲染的cellview}
#{渲染的cellview}
#{渲染的cellview}

我可以在渲染时删除它们，但这是一种黑客行为。有没有（用木偶）惯用的方法来解决这个问题

编辑：它呈现如下内容

---

使用

Marionette.CompositeView

而不是

Marionette.CollectionView

。这将允许您指定一个包含2个容器的模板，并覆盖

appendHtml

方法以决定在何处呈现itemView（与您现在的做法非常类似）

---

重写

appendHtml

的一个问题是，在呈现集合时（即重置集合后），无法利用缓冲。如果有很多项，这可能是一个问题，因为逐个追加它们的速度非常慢。

可能有两个以上的容器，然后只需使用您的代码，但每次重置时都会让集合视图自身重新渲染。为了防止在集合重置时添加容器，我使用以下代码：

onBeforeRender:function（）{This.$el.empty（）}