javascript - Backbone.Marionette collectionview 在定义 el 时重置

Question

我对 Marionette collectionView 有疑问。当我没有定义 el 时

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

Collection View :

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

collectionview 渲染封装在 div 标签内的项目，这是有问题的。

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

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

View 呈现 itemView 的方式如下:

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

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

救命!

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

Answer 1

如果您使用的是 Marionette >= 2.0.0，则 itemView 已替换为 childView。就目前而言，Marionette 的 CollectionView 类似乎没有 native 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 */);