Meteor 和 Bootstrap 轮播

Question

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

Bootstrap 要求第一个帖子从一开始就有一个活跃的类。使用 Meteor 助手，我似乎无法让这段代码正常工作。

这是我的轮播 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 为项目添加一个活动类。但是，这会将活动类添加到所有这些类中。

我仍然是 Meteor 的初学者，因此我将非常感谢您提供正确方向的提示！

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