正确使用Backbone.js和Marionette对集合进行分组

Question

我不太确定如何使用Backbone.js和Marionette来组织我的收藏夹和视图。 因此，我所拥有的是一个相当简单的时间集合（开始，结束，输入）。 我想将此集合显示为表格，并在每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，但是我不确定如何对集合进行分组和拆分。

这是一个jsfiddle： http : //jsfiddle.net/y799N/1/

HTML：

<script id="row-tmpl" type='text/template'>
    <td><%= date %></td>
    <td><%= start %></td>
    <td><%= end %></td>
</script>

<script id="grid-tmpl" type='text/template'>
        <thead>
            <th>Date</th>
            <th>Start</th>
            <th>End</th>
        </thead>
        <tbody id="bdy"></tbody>
</script>

使用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);

Answer 1

最直接的方法是修改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);
}