定义el时，Backbone.Marionette集合视图将重置

Question

我对木偶collectionView有意见。当我没有像这样定义el时

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

集合视图：

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
});

集合视图呈现封装在div标记中的项目，这是有问题的。

当我像这样定义容器元素时：

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

该视图将itemViews呈现为，

<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>

这是我们所期望的，但是当整个集合呈现元素时，元素会消失，而我仍然保留<div id="#carousel-inner"></div>这样的空视图

帮助!

PS:我正在使用bootstrap-carousel来启用我的carousel

Answer 1

如果您使用的是Marionette >= 2.0.0，则itemView已被childView取代。就目前而言，Marionette的CollectionView类似乎没有原生itemView属性。在the official docs和the source for the module中都没有提到它。

此外，您似乎在定义容器元素的选择器中犯了错误：$('#carousel-inner')正在寻找一个id为carousel-inner的元素，但在生成的html中，顶级div将其作为一个类。

我觉得传入一个已经存在的元素可能会把事情搞砸。动态地定制"el“可能会更好。我会尝试将呈现的标记移动到collectionView中，如下所示：

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');
  }
});

然后在调用时，我会像这样调用：

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