Skip to content
This repository has been archived by the owner on Mar 20, 2021. It is now read-only.

Wrapping nth items view within a div.row #401

Open
yamsellem opened this issue Nov 30, 2014 · 1 comment
Open

Wrapping nth items view within a div.row #401

yamsellem opened this issue Nov 30, 2014 · 1 comment
Labels
Milestone

Comments

@yamsellem
Copy link

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 kpdecker added this to the 3.1 milestone Nov 30, 2014
@kpdecker
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

No branches or pull requests

2 participants