Wrapping nth items view within a div.row

[yamsellem]

I've only find one ugly solution — after a hard hour of kung-fu fighting — to wrap every 3 (or n) items of a collection within a wrapper div.row. Like it's used to be in every css framework, like foundation or bootstrap. Is there a proper way of doing this?

What I've tried: — wrapping the self.$elon rendered:item -> render only the first 3 items and ignore the rest — wrapping the itemElement on rendered:item -> wrap only the inner div, not the div.data-view-cid — accessing the index in the item view -> wrap only the inner div, not the div.data-view-cid

var CollectionView = Thorax.CollectionView.extend({
  itemView: ItemView,
  events: {
    'rendered:item': 'wrap'
  },
  wrap: function(self, collection, model, itemElement, index) {
    if(index === collection.length-1) {
        index = index+1;
        var all = self.$el.find('div[data-view-cid]');
        var modulo = 3;
        var loop = parseInt(index/modulo);

        for(var i=0; i<=loop; i++) {
            var start = i*modulo;
            var end = (i+1)*modulo;
            console.log(start, end)
            all.slice(start, end).wrapAll('<div class="row">');
        }
    }
}

[kpdecker]

Outside of subcollections, which is not the prettiest solution, I'm not sure of a simple way to do this.

There should be first class support for partitioned collection rendering in the framework.