How to remove extra wrappers for CollectionView with MarionetteJS?

Question

I am having a similar problem as was discussed here for a LayoutView, i.e. that extra wrappers are created: Extra wrappers in Backbone and Marionette

Now, I am trying to use a CollectionView and see similarly that some unexpected div appear.

My CollectionView looks like:

MA.Views.Composites.Movies = Backbone.Marionette.CollectionView.extend({

  template: 'composites/movies',

});

MA.addInitializer(function(){
  MA.collections.movies = new MA.Collections.Movies();
  MA.composites.movies = new MA.Views.Composites.Movies({
    itemView: MA.Views.Items.Movie,
    collection: MA.collections.movies
  });
  MA.collections.movies.fetch();
});

The template:

 <div id="movies">
   movies
 </div>

The ItemView:

MA.Views.Items.Movie = Backbone.Marionette.ItemView.extend({
  template: 'items/movie',

  views: {}
});

and ItemView template:

<div class="item">
  {{ title }}
</div>

The resulting HTML looks like:

extra wrappers

poseid poseid · Accepted Answer · 2013-04-21T18:54:10

The problem seems to be that I mixed CompositeView with CollectionView. By adding className properties on the views, the solution quickly becomes visible. The ItemView should not contain a wrapping div in the template, as this is added by the ItemView.

How to remove extra wrappers for CollectionView with MarionetteJS?

1 Answers