Displaying a separator view in CollectionView - marionette

Question

I've got a Collection that is sorted by model's datetime property. I need to display a 'separator view' whenever the day changes. I was thinking about using a CollectionView to display the data. Am I on the right track?
The end result would look something like this:
1st of September (separator view)
-----------------------------
Model1
Model2
2nd of September (separator view)
-----------------------------
Model3

Answer 1

The solution was to extend the CollectionView's appendHtml method.
appendHtml: (collectionView, itemView, index) ->
if #_isDayChanged index
itemView.separator = true
itemView.render()
super

Answer 2

I use a list of CompositeViews to divide collection items in groups by month. You can easily adapt it to group by days.
let ItemView = Marionette.ItemView.extend({
...
});
let ListView = Marionette.CompositeView.extend({
childView: ItemView,
template: template,
childViewContainer: '.items',
filter(child) {
return child.get('month') === this.model.get('month');
}
});
let MonthGroupedListView = Marionette.CollectionView.extend({
childView: ListView,
childViewOptions(item, index) {
return {
model: item,
collection: this.getOption('collection')
};
},
initialize() {
// Passed collection remains in this.options.collection
// this.collection will contain distinct months
this.collection = new Backbone.Collection();
this.reset();
this.listenTo(this.options.collection, 'sync update', this.reset);
},
reset() {
// Find distnct months and put them into the collection
let months = _.uniq(this.options.collection.map((model) => model.get('month')));
this.collection.reset(_.map(months, (month) => ({month})));
}
});
From the data below the result should be three groups of ListView:
let data = [
{ id: 1, month: '2015-01', title: "January item 1" },
{ id: 2, month: '2015-01', title: "January item 2" },
{ id: 3, month: '2015-02', title: "February item 1" },
{ id: 4, month: '2015-05', title: "May item 1" },
{ id: 5, month: '2015-05', title: "May item 2" },
{ id: 6, month: '2015-05', title: "May item 3" }
];
let view = new MonthGroupedListView({
collection: new Backbone.Collection(data)
});
The template for ListView looks like this:
<div class="month-header">
{{month}}
</div>
<ul class="items">
{{-- Here ItemView elements will be rendered --}}
</ul>