Backbone.Marionette collection iterator as part of itemview classname

Question

I'm still learning Backbone and Marionette so forgive me if this is trivial.

I have a Backbone.Marionette.CompositeView that I iterate over to render a collection of Backbone.Marionette.ItemView.

My ItemView renders with a className: 'column'.

Is there a way to add the iterator as part of the className for each ItemView?

What I'm trying to accomplish is that the elements render as following:

<div class="column column-1"></div>
<div class="column column-2"></div>
<div class="column column-3"></div>
...

I couldn't find a suitable solution in the docs nor other questions here.

Thanks!

Answer 1

Essentially what you need to know is the index of the itemView model in your collection. Something like this will work:

// Create an itemView
var itemView = Backbone.Marionette.ItemView.extend({
    template: "#item-template",
    onRender: function () {
        this.$el.addClass('class-nr-' + this.options.itemIndex);
    }
});

// Create a collectionView
var colView = Backbone.Marionette.CollectionView.extend({
    collection: colInstance,
    itemView: itemView,
    itemViewOptions: function (model, index) {
        return {
            itemIndex: index
        };
    }
});

See this fiddle: http://jsfiddle.net/Cardiff/VTkB2/2/
Documentation: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-itemviewoptions