Backbone.Marionette collectionview 在定义 el 时重置

Question

我对木偶收藏视图有问题。当我不定义 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") });

视图呈现项视图，如下所示，

<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：我正在使用引导轮播来启用我的轮播

Answer 1

如果您使用的是木偶>= 2.0.0，则itemView已被替换为 childView 。 就目前而言，Marionette的CollectionView类似乎没有原生itemView属性。 官方文档和模块源代码中都没有提到它。

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

我觉得传入一个已经存在的元素可能会搞砸事情。 最好即时制作自定义"el"。 我会尝试将标签渲染移动到集合视图中，如下所示：

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 */);