Marionette CollectionView with one unique ItemView

Question

Is there a way I can create a single unique view within a Marionette CollectionView? I mean something like this:

CollectionView

• StartView (this is the unique view)
• Regular ItemView
• Regular ItemView
• Regular ItemView
• etc.

By unique, I mean the "Start ItemView" must use a unique template, and not have the methods associated with the regular ItemViews.

Things I've tried:

• Just prepending the start view to the el of the CollectionView is not desirable, because my CollectionView's methods act on its child views.

• In the Marionette documentation, overriding buildItemView is suggested for this situation (I think?). I'm not sure how to override it. Just calling buildItemView doesnt work, because the StartView doesn't have an associated model or any options. Seems like I can't leave these args out, or it just returns undefined.

• I cant include the markup for a StartView in my CollectionView's template because... Marionette CollectionViews cant have a template.

• From the Marionette documentation, it doesn't seem like this fits the use case for the CompositeView. But maybe I'm wrong.

I'm probably missing something fairly obvious. Thanks in advance for the help.

edit: formatting

Answer 1

Create 2 different views, 'StartView' and 'NormalView':

StartView = Marionette.ItemView.extend({
    template:"#start-template'
});
NormalView = Marionette.ItemView.extend({
    template:"#normal-template"
});

In your collection view, override getItemView and return your 'StartView' and 'NormalView'... something like this:

MyCollectionView = Marionette.CollectionView.extend({
   getItemView:function(item){
       if(item.get("ImTheFirst")===true)
          return StartView;
        else
          return NormalView;
    }
});

On the first item in your collection, add a property 'ImTheFirst' (for example) and set it to true.

Answer 2

What you are looking for here is a CompositeView. A CompositeView is a mash-up between an ItemView and a CollectionView. Essentially, the CompositeView itself would act as your StartView, and then you define an ItemView to act as your "Regular ItemView"'s.
Something like this:

RegularItemView = Backbone.Marionette.ItemView.extend({
  template: "#regular-itemview-template"
});

CompositeView = Backbone.Marionette.CompositeView.extend({
  itemView: RegularItemView,
  template: "#start-template"
});