Question

我遇到了Marionette collectionView的问题。当我没有定义el喜欢

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

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

collectionview呈现封装在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：我正在使用bootstrap-carousel启用我的轮播

Answer 1

如果您使用的是Marionette＆gt; = 2.0.0，itemView已被childView取代。就目前而言，Marionette的CollectionView类似乎没有本地itemView属性。它既不在the official docs也不在the source for the module中提及。

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

我觉得传入一个已经存在的元素可能会搞砸事情。做自定义＆＃34; el＆＃34;可能会更好。在飞行中。我尝试将标记渲染移动到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 */);

当定义el时，Backbone.Marionette collectionview会重置

1 个答案: