Splitting a collection into multiple views (backbone/marionette)

Question

Working on a project and using Backbone/Marionette for the first time.

I'm pulling some data from an API into a collection and I'd like to group the items and display them in a tabbed interface with each group going into its own tab.

Following is a distilled version of my code. I also created a jsfiddle.

var MyModel = Backbone.Model.extend({/* attributes: type, name */});

var MyCollection = Backbone.Collection.extend({model: MyModel});

var MyView = Marionette.ItemView.extend({
    tagName: 'li',
    template: _.template("<%= name %>")   
});

var MyCollectionView = Marionette.LayoutView.extend({
    el: '#tabs-content',
    template: _.template('<div id="A"></div><div id="B"></div><div id="C"></div>'),
    regions: {
        rA: '#A',
        rB: '#B',
        rC: '#C'
    },

    initialize: function() {
        var SubView = Marionette.CollectionView.extend({
            childView: MyView,
            tagName: 'ul'
        });
        this.viewA = new SubView({collection: new Backbone.Collection()});
        this.viewB = new SubView({collection: new Backbone.Collection()});
        this.viewC = new SubView({collection: new Backbone.Collection()});
    },

    onBeforeRender: function() {
        var grouped = this.collection.groupBy('type');
        this.viewA.collection.reset(grouped.a);
        this.viewB.collection.reset(grouped.b);
        this.viewC.collection.reset(grouped.c);
    },

    onRender: function() {
        this.regionManager.get('rA').show(this.viewA);
        this.regionManager.get('rB').show(this.viewB);
        this.regionManager.get('rC').show(this.viewC);
    }
});

There's a couple of things that concern me about my solution:

Manually creating subviews in the LayoutView object seems messy; is there a better way?
The collection is being copied to the subviews, so if I have 1000 models, I now have 2000 models in memory

Is there a better way to manage this? Thanks in advance.

knpsck knpsck · Accepted Answer · 2014-10-29T10:47:55

Creating subviews and collections in views is not a good practice, use the controller. You can split data with an underscore _.groupBy(list, iteratee, [context]) and manually set necessary collections in the controller. Nice tutorials about application architecture can be found there http://www.backbonerails.com/series.

Another way, if you do not have a lot of data, you can override attachHtml method to specify childView container. Look at this example http://jsfiddle.net/7j3sfsvt/

Splitting a collection into multiple views (backbone/marionette)

1 Answers