backbone.js - Grouped collection and views with Backbone.Marionette -

i have backbone collection of documents want group month, documents created within same month, grouped together. know can achieve with:

var bymonth = documents.groupby(function(doc){   return this.get('date').getmonth() }); 

now have bymonth array, best way set backbone view automatically updates when items added collection, date on 1 of documents changes, etc - document automatically move to correct group , views updated accordingly?

ps. want show aggregate data each month (for example, number of documents, etc).

marionette's compositeview ideal such things, i'm not sure if , how can make work grouped collections?

i've thought lot, , don't have perfect answer, here notes (brain-dump) in case / spark new ideas you:

best way display (and auto-update) collection broken 3 sections/groups e.g. this-week, next-week , upcoming

1. filter collection outside view: create filtered sub-collections in controller, , pass 1 each collectionview. there's 2 options modifying collection:
   • a) directly modify 3 sub-collections
     • pro: auto-update work, no filtering logic required in collectionview, emptyview work, easy have count @ top of each section.
     • con: have pass around these 3 collections everywhere may want modify them, , have logic when adding/removing event: if (event.time<next-week) {...} else if (event.time<upcoming) {...} else {...}. abstract new entity, has refs 3 collections, , has simple add/remove methods containing above logic.
     • another con: items can't move between these sub-collections, critical, if groupings time-specific. tho guess happen on full re-render anyway, have updatesubcollections method , call onbeforerender or whatever.
   • b) modify parent collection - requires listener on main collection manually re-filtering each sub-collection in controller on add/remove, , manually re-rendering 3 list views.
     • pro: collectionview real simple - no filtering logic etc, emptyview works, easy have count @ top of each section.
     • con: lose auto-update magic (when collection changes, it's collectionview automatically updates), , requires dumb (costly) re-render of whole collectionview everytime
2. filter collection inside view: pass full collection each collectionview, , override appendhtml method (or showcollection) display ones satisfy condition.
   • pro: auto-update magic, , still dealing single collection everywhere in code
   • con: require logic show count @ top of each section. requires logic show empty view or not, , may have other consequences doubt collectionviews designed this… may doing clever stuff itemviews in background - inefficient - requires research. through source , find best (highest level) function override not bother processing items not relevant
3. single view option: filter collection inside view's appendhtml() function manually appending each view in right section of page.
   • pro: logic in 1 place, not right place (the collectionview). auto-update works. still dealing single collection everywhere in code.
   • con: require logic show count @ top of each section. need handle emptyview manually each section, isn't hard - in template define of sections, containing empty messages, , in appendhtml function, when figure out section item belongs to, hide empty message section before append it. problem how hide empty sections when items removed collection. way listen remove event on collection, , check sections see if empty? or re-render whole thing.

when first joined current team, had old code implemented option 1b, thought horrible. when had implement similar went option 3, worked got bit messy time. next time think i'm going try option 1a, it's untested...

let me know ended doing!

edit: couple of relevant issues on marionette project on github:

• collectionview / compositeview should have optional filter method
• add ability filter collection view