Meteor and Bootstrap Carousel

Question

我正在Meteor的一个博客项目中工作，我在前端使用Bootstrap 4。我现在想要显示一个博客页面，其中Bootstrap轮播在3个最近的帖子中循环。

Bootstrap要求第一个帖子从一开始就有一个活跃的类。与我的流星帮手，我似乎无法得到此代码工作。

这里是我的旋转木马的html：

<template name="blog"> 
    <div class="carousel slide" data-ride="carousel" id="blog-carousel"> 
    <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> 
     <li data-slide-to="1" data-target="#carousel-example-generic"></li> 
     <li data-slide-to="2" data-target="#carousel-example-generic"></li> 
    </ol> 
    {{> carouselList}} 
    <a class="left carousel-control" data-slide="prev" href="#blog-carousel" role="button"> 
     <span aria-hidden="true" class="icon-prev"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" data-slide="next" href="#blog-carousel" role="button"> 
     <span aria-hidden="true" class="icon-next"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</template> 

这里是我的列表循环以及各个转盘项目：

<template name="carouselList"> 
    <div class="carousel-inner" role="listbox"> 
    {{#each carouselItems}} 
     {{> carouselItem}} 
    {{/each}} 
    </div> 
</template> 

<template name="carouselItem"> 
    <div class="carousel-item"> 
    <img alt="{{title}}" src="{{imageUrl}}"> 
    </div> 
</template> 

这些都是我的名单助手：

Template.carouselList.helpers({ 
    carouselItems: function(){ 
     return Posts.find({}, {sort: {timeCreated: -1}}) 

    } 
}); 

Template.carouselItem.rendered = function() { 
    this.$('.carousel-item').first().addClass('active'); 
}; 

我正在尝试使用jQuery将活动类添加到项目。然而，这增加了所有这些活动类。

我仍然是流星的初学者，所以我会非常感激一个正确的方向提示！

Answer 1

您需要设置将其激活，如果您使用的是最新的流星版本，我们可以@index检查的{{#each}}指标，如果它是第一个循环分配这里活跃的演示模板已经呈现之前，也许有更好的方式，但这应该工作得很好。

<template name="carouselList"> 
    <div class="carousel-inner" role="listbox"> 
    {{#each carouselItems}} 
     {{> carouselItem title=title imageUrl=imageUrl index=@index}} 
    {{/each}} 
    </div> 
</template> 

<template name="carouselItem"> 
    <div class="carousel-item {{isActive}}"> 
    <img alt="{{title}}" src="{{imageUrl}}"> 
    </div> 
</template> 

Template.caruselItem.helpers({ 
    isActive: function() { 
    return (this.index === 0) ? 'Active': ''; 
    } 
}); 

P.S如果引导需要有活跃在渲染之前，如果他们使用它，如果它只是CSS，你可以改变你的代码，使其只是移动this.$('.carousel-item').first().addClass('active');到carouselList onRendered工作上面会工作。因为现在你基本上都做了3次。