title: Using Marionette to group items in a collection view
body: <p>I'm building an application using backbone and marionette.js.  I'm planning on using a collection view to present some items and then allow them to be filtered, sorted and grouped.</p>
  
  <p>I was wondering if there are any good design ideas for actually appending the html in a grouped fashion. I have a few ideas but I was wondering if someone might have input on which would be better design.</p>
  
  <p>My first idea is to change the appendHtml method on the collection view, and if grouping is enabled, I can have the appendHtml function either find or create the child group's bin and place the child view in it.  </p>
  
  <pre><code>appendHtml: function(collectionView, itemView, index){
    var $container = this.getItemViewContainer(collectionView);
  
    // get group from model
    var groupName = itemView.model.get("group");
  
    // try to find group in child container
    var groupContainer  = $container.find("." + groupName);
  
    if(groupContainer.length === 0){
      // create group container
      var groupContainer = $('&lt;div class="' + groupName + '"&gt;')
      $container.append(groupContainer);
    }
  
    // Append the childview to the group
    groupContainer.append(itemView);
  }
  </code></pre>
  
  <p>My second idea is to break apart the collection into groups first and then maybe render multiple views... This one seems like it might be more work, but might also be a bit better as far as the code structure is concerned.</p>
  
  <p>Any suggestions or thought eliciting comments would be great! </p>
  
  <p>Thanks</p>