javascript - Using Marionette to group items in a collection view -

javascript - Using Marionette to group items in a collection view -

i'm building application using backbone , marionette.js. i'm planning on using collection view nowadays items , allow them filtered, sorted , grouped.

i wondering if there design ideas appending html in grouped fashion. have few ideas wondering if might have input on improve design.

my first thought alter appendhtml method on collection view, , if grouping enabled, can have appendhtml function either find or create kid group's bin , place kid view in it.

appendhtml: function(collectionview, itemview, index){ var $container = this.getitemviewcontainer(collectionview); // grouping model var groupname = itemview.model.get("group"); // seek find grouping in kid container var groupcontainer = $container.find("." + groupname); if(groupcontainer.length === 0){ // create grouping container var groupcontainer = $('<div class="' + groupname + '">') $container.append(groupcontainer); } // append childview grouping groupcontainer.append(itemview); }

my sec thought break apart collection groups first , maybe render multiple views... 1 seems might more work, might bit improve far code construction concerned.

any suggestions or thought eliciting comments great!

thanks

maybe not you're looking for, here's related question:

backbone.marionette, collection items in grid (no table)

my solution issue -- 1 fetched collection rendered list or grid ("items grouped in rows") utilize _.groupby() in "wrapper" compositeview , pass modified info downwards chain compositeview (row) , downwards itemview.

views.grid = backbone.marionette.compositeview.extend({ template: "#grid-template", itemview: views.gridrow, itemviewcontainer: "section", initialize: function() { var grid = this.collection.groupby(function(list, iterator) { homecoming math.floor(iterator / 4); // 4 == number of columns }); this.collection = new backbone.collection(_.toarray(grid)); } });

here's demo:

http://jsfiddle.net/bryanbuchs/c72vg/

javascript backbone.js marionette