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