Fragmenting Backbone collection view based on some criteria

0
votes

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.

1
backbone.jsmarionette
Maybe this will perfectly fit for logic inside templates :) you got to do certain things even though it is nor right. I constructed a treeview using treenode as model and single template that contained logic – Deeptechtons

1 Answers

2
votes

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'