title: Splitting a collection into multiple views (backbone/marionette)
body: <p>Working on a project and using Backbone/Marionette for the first time. </p>
  
  <p>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.</p>
  
  <p>Following is a distilled version of my code. I also created a <a href="http://jsfiddle.net/jbarreiros/3v7phkrg/" rel="nofollow">jsfiddle</a>.</p>
  
  <pre><code>var MyModel = Backbone.Model.extend({/* attributes: type, name */});
  
  var MyCollection = Backbone.Collection.extend({model: MyModel});
  
  var MyView = Marionette.ItemView.extend({
      tagName: 'li',
      template: _.template("&lt;%= name %&gt;")   
  });
  
  var MyCollectionView = Marionette.LayoutView.extend({
      el: '#tabs-content',
      template: _.template('&lt;div id="A"&gt;&lt;/div&gt;&lt;div id="B"&gt;&lt;/div&gt;&lt;div id="C"&gt;&lt;/div&gt;'),
      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);
      }
  });
  </code></pre>
  
  <p>There's a couple of things that concern me about my solution:</p>
  
  <ul>
  <li>Manually creating subviews in the LayoutView object seems messy; is there a better way?</li>
  <li>The collection is being copied to the subviews, so if I have 1000 models, I now have 2000 models in memory</li>
  </ul>
  
  <p>Is there a better way to manage this? Thanks in advance.</p>