Backbone.Marionette collectionview resets when el is defined

Question

I have a problem with Marionette collectionView. When I dont define the el like

var featureditems = new View.CarouselItems({ collection: content });

the collectionview:

View.CarouselItem = Marionette.ItemView.extend({      

    template: carouselItemTpl,

    tagName: 'div',

    attributes: function() {
      var clas = '';
      if (this.model.get('ind') == 0) {
        clas = ' active'
      }
      return {
        'data-slide-to': this.model.get('ind'),
        'data-target': '#homeCarousel',
        'class': 'item' + clas
      };
    },


});

View.CarouselItems = Marionette.CollectionView.extend({

  itemView: View.CarouselItem
});

The collectionview renders the items encapsulated within a div tag, which is problematic.

When I define the container element like so:

var featureditems = new View.CarouselItems({ collection: content, el: $("#carousel-inner") });

The view renders the itemViews like,

<div class="carousel-inner">
    <div class="active item">
      <img alt="" class="slide-img" src="./assets/img/avant_floorstand.jpg">
      <div class="hero-unit">            
      </div>
      <!--div class="hero-video"></div-->
    </div>
    <div class="item">
      <img alt="" class="slide-img" src="./assets/img/avant_wall.jpg">
       <div class="hero-unit">            
      </div>
    </div>
    <div class="item">
      <img alt="" class="slide-img" src="./assets/img/beovision11_day3jpg jpg.jpg">
       <div class="hero-unit">            
      </div>
    </div>
  </div>

which is what is desired, but when the whole collection renders the elements disappear and I remain with and empty view like <div id="#carousel-inner"></div>

Help!

PS: I am using bootstrap-carousel to enable my carousel

Answer 1

If you are using Marionette >= 2.0.0, itemView has been replaced by childView. As it stands now, Marionette's CollectionView class doesn't seem to have a native itemView property. It's mentioned in neither the official docs nor in the source for the module.

Also, you seem to have mistake in your selector for the defined container element: $('#carousel-inner') is looking for an element with the id carousel-inner, but in your resulting html, the top-level div has that as a class.

I feel like passing in an element that already exists might be screwing with things. It might be better to make the custom "el" on the fly. I'd try moving the tag rendering into the collectionView, like so:

View.CarouselItems = Marionette.CollectionView.extend({
  childView: View.CarouselItem,
  tagName: 'div',

  //Add your custom classes to the div tag as soon as it's rendered
  onRender: function(){
    this.$el.addClass('carousel-inner');
  }
});

Then when invoking, I'd call something like this:

var featuredItems = new View.CarouselItems({collection: content});
featuredItems.render().$el.appendTo(/*The DOM Node you'd like to append this to */);