Question

I’m a bit new to BackboneJS and Marionette, and I’m a bit stuck on how to implement some tricky behaviour with a CollectionView. Suppose I have a list of appointments, each with an appointment date/time (stored as a unix timestamp, but that’s not important).

When I display these, I’d like to display them as follows:

Today

• Meeting A (10:00 AM)
• Meeting B (11:00 AM)
• Meeting C (1:00 PM)
• … and 4 more

Next 7 days

• Meeting D (Monday at 3 PM)
• Meeting E (Tuesday at 2 PM)
• … and 7 more

The approach I’m considering is to pull one collection from the server for the next 7 days (including today) and then do 2 views over the collection (one for today, and one for the week). Here’s what I’m struggling with:

• AFAIK, the Marionette.CollectionView renders all the elements in a collection. Is there an easy way to override this behaviour to only render, say, 3 or 4 items?
• How do I deal with the … and n more line? It’s not really a model, but its data is computed from the underlying collection.

If it makes a difference, I’m using @SlexAxton’s requirejs-handlebars project for templating.

Answer 1

You might use a CompositeView instead of a CollectionView. So you define yourself the collection attribute to use a subset you want, and then you can display the “X more…” link.

It could be something like:

EventView = Backbone.Marionette.ItemView.extend
  template: 'event'


EventsView = Backbone.Marionette.CompositeView.extend
  itemView: EventView
  template: 'events'

  initialize: (attributes)->
    @extractSubset(attributes.collection)

  extractSubset: (collection)->
    @collection  = new EventsCollection(collection.filterByWhatYouWant())
    @othersCount = collection.length - @collection.length

  appendHtml: (collectionView, itemView)->
    collectionView.$('.events').append(itemView.el)

  serializeData: ->
    othersCount:      @othersCount
    andAnyOtherThing: 'you need in the template'