Backbone.Marionette：使用 Collection 渲染两列伪表答案

【问题标题】：Backbone.Marionette: Rendering two columns pseudotable with CollectionBackbone.Marionette：使用 Collection 渲染两列伪表
【发布时间】：2014-08-07 14:42:18
【问题描述】：

我想渲染这样的结构：

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

我可以在渲染时将它们移除，但这是一种 hack。有没有（在木偶中）惯用的方法来解决这个问题？

编辑：它呈现这样的东西

【问题讨论】：

标签： javascript backbone.js coffeescript marionette

【解决方案1】：

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

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

【讨论】：

容器可以多于两个
然后只需使用您的代码，但在每次重置时让集合视图重新呈现自己。
为了防止在集合重置时添加容器，我使用以下代码：onBeforeRender: function () {this.$el.empty()}