Javascript 正确使用Backbone.js和木偶对集合进行分组

我不太清楚如何使用Backbone.js和木偶来组织我的收藏和视图。所以我有一个相当简单的时间集合（开始、结束、进入）。我希望将此集合显示为一个表，并在每4个条目后重复该表的布局

Date    Start   End
0   08:00   18:00
1   08:00   18:00
2   08:00   18:00
3   08:00   18:00

Date    Start   End
4   08:00   18:00
5   08:00   18:00
6   08:00   18:00
7   08:00   18:00

Date    Start   End
8   08:00   18:00
9   08:00   18:00

到目前为止，我创建的是一个带有ItemView的CompositeView，但是我不确定如何对集合进行分组和拆分

下面是一个JSFIDLE：

Html:

日期
开始
终点

Javascript:

var Row = Backbone.Marionette.ItemView.extend({
    template: '#row-tmpl',
    tagName: 'tr'
});

var Grid = Backbone.Marionette.CompositeView.extend({
    tagName: 'table',
    template: '#grid-tmpl',
    itemView: Row,

    appendHtml: function(collectionView, itemView){
        collectionView.$('#bdy').append(itemView.el);
    }
});

var Time = Backbone.Model.extend({
    defaults: {
        start : '08:00',
        lazy : '00:45',
        end: '18:00',
        date: 1
    }
});

var TimeCollection = Backbone.Collection.extend({
    model: Time
});

///
var times = new TimeCollection();
for(var i = 0;i<10;i++){
    times.add(new Time({date:i}));
}



var grid = new Grid({
    collection:times
});

grid.render();
console.log(grid.el);
$('#grid').html(grid.el);

var Row=Backbone.marionete.ItemView.extend({
模板：“#第tmpl行”，
标记名：“tr”
});
var Grid=Backbone.marionete.CompositeView.extend({
标记名：“表”，
模板：“#网格tmpl”，
项目视图：行，
appendHtml:函数（collectionView、itemView）{
collectionView.$（'#bdy'）.append（itemView.el）；
}
});
var-Time=Backbone.Model.extend({
默认值：{
开始：“08:00”，
懒惰：“00:45”，
完:"18时"，
日期：1
}
});
var TimeCollection=Backbone.Collection.extend({
型号：时间
});
///
var times=new TimeCollection（）；
对于（var i=0；i最直接的方法是修改
CompositeView
中的
appendHtml
函数，以便在需要时插入标题

appendHtml : function (cv, itemView, index) {
  var $childContainer = this.$(this.itemViewContainer);
  if (index % 4 == 0) {
    $childContainer.append("<tr><td>Date</td><td>Start</td><td>End</td></tr>");
  }
  $childContainer.append(itemView.el);
}

appendHtml:function（cv、itemView、index）{
var$childContainer=this.$（this.itemViewContainer）；
如果（索引%4==0）{
$childContainer.append（“DateStartEnd”）；
}
$childContainer.append（itemView.el）；
}
这可能会帮助您我根本不会拆分集合，而是为
CompositeView
编写一个自定义的
render
函数。这应该相当简单：循环遍历集合，附加ItemView，并使用模运算器每隔x次有条件地插入一行标题。
appendHtml : function (cv, itemView, index) {
  var $childContainer = this.$(this.itemViewContainer);
  if (index % 4 == 0) {
    $childContainer.append("<tr><td>Date</td><td>Start</td><td>End</td></tr>");
  }
  $childContainer.append(itemView.el);
}