Twitter bootstrap 木偶组合视图-每N个项目更改模板

我使用木偶有一段时间了，但我不知道如何才能以一种简单的方式做我想做的事情

我有一个复合视图，它呈现如下内容：

<div class="row">
  <div class="col-xs-12">
    <div id="items"></div>
  </div>
</div>

我的每个项目都呈现为：

<div class="col-xs-3">foo</div>

foo

这里的问题是，每4个项目，我想渲染一个新行，所以事情很漂亮，不会弄乱引导的网格间距

总之，如果我只是按原样渲染它们，将发生以下情况：

<div class="row">
  <div class="col-xs-12">
    <div id="items">
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
    </div>
  </div>
</div>

福
福
福
福
福
福
福
福

正如您所看到的，这打破了引导，因为在这些条目div中有超过12个网格空间

我想要的是：

<div class="row">
  <div class="col-xs-12">
    <div id="items">
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div id="items">
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
       <div class="col-xs-3">foo</div>
    </div>
  </div>
</div>

福
福
福
福
福
福
福
福

达到这种效果的一种方法是什么？我应该有行视图，行集合视图和每个项目视图？这似乎太麻烦了。

我想说，要实现这一点，需要覆盖。使用当前视图、附加的子视图以及视图在集合中的索引调用它

您必须查看索引并确定何时添加新的引导行，然后确保将新的子项插入到正确的行中

---

在编写自己的缓冲之前，请确保您了解的默认实现如何处理缓冲。

您可以利用Collection/CompositeView的childViewOptions来接受函数。从CompositeView可以传递所需的模板。例如：

childViewOptions: function () {
   var template = defaultTemplate;
   if (++this.childCount % 4 == 0) 
      // 3 children have been rendered, this one is the 4th
      template = fourthTemplate;
   return {
      template: template
   } 
}

其中

this.childCount

是CompositeView的属性，应该在某个地方初始化

initialize: function () {
   this.childCount = 0;
}

如果你不愿意用额外的道具来污染你的视野，你可以用木偶的hard-dep Baby保姆来计算孩子的数量，该保姆负责管理一个集合/合成视图的孩子：

childViewOptions: function () {
   var template = defaultTemplate;
   if ((this.children.length + 1) % 4 == 0) 
      // 3 children have been rendered, this one is the 4th
      template = fourthTemplate;
   return {
      template: template
   } 
}

---

这实际上取决于所需的效果，但如果您为

col-xs-3

元素指定

min height

，则不需要任何额外的行包装器，因为它们将优雅地溢出到新行。否则，您需要一组简单的

CollectionViews

s，这似乎也不是什么大事。我很好奇您是如何应用这个答案的。我承认我只是在写这篇文章时扫描了你的问题，然后意识到这只适用于在

儿童视图上切换模板，而不适用于修改
合成视图
模板。这对原始问题不起作用，但我使用此技术来渲染旋转木马，而不是渲染一堆行，使用正确的活动css属性。谢谢