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

Wrapping nth items view within a div.row #401

@yamsellem

Description

@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">');
        }
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions