How to sort backbone collection into multiple collections for rendering?

Question

I want to break apart a collection of events into events by days. I'm trying to use the groupBy function but I can't figure out how it would make different collections that I can create views with different headings for.

Here's my code

var eventCollectionView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.collection, "reset", this.render);
    },
    tagName: "div",
    className: "events",
    render: function(){
        _.groupBy(this.collection.models, function(model){
            return model.get('date')
        });
        this.collection.each(function(eventItem) {
                var view = new eventView({model: eventItem});
            this.$el.append(view.render().el);

        }, this);//defines scope
        return this;
    }
});

I've also tried this.collection.groupBy and the grouping isn't working.

Answer 1

You need to hold on to the return value of the groupBy function. Currently you're grouping and then just using the ungrouped collection again. _.groupBy() will return an object with property keys you grouped by which you can then iterate over with _.each() if you want. here's an example http://jsfiddle.net/q36Le6c4/1/