Marionette CompositeView - 在模板中更改每第 n 个项目

Question

我使用 Marionette 有一段时间了，但我不确定如何以简单的方式做我想做的事。

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

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

我的每个项目都呈现为：

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

这里的问题是，每 4 个项目，我想渲染一个新行，所以事情很漂亮，不要搞砸 bootstrap 的网格间距。

总而言之，如果我按原样渲染它们，就会发生这种情况：

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

如您所见，这会分解 bootstrap，因为我们在那些项目 div 中有比 12 个网格 space 多得多的网格。

我想要的是：

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

实现该效果的简便方法是什么？我应该有一个行视图，一个行集合视图和每个项目的视图？就是太麻烦了。

Answer 1

我想覆盖 attachHtml 来实现这一点。它通过当前视图、附加的子视图以及该视图在集合中的索引被调用。

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

确保您了解 attachHtml 的默认实现如何处理缓冲，然后再编写自己的实现。

Answer 2

您可以利用 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;
}

如果你不愿意用额外的道具污染你的视野，你可以用 Marionette 的 hard dep Babysitter 来计算 children 的数量，它管理着 Collection/CompositeView' s children:

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

Marionette CompositeView - 在模板中更改每第 n 个项目

Marionette CompositeView - change in template each nth items

twitter-bootstrap

backbone.js

marionette

composite-view