javascript - Meteor 和 Bootstrap 轮播

Question

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

Bootstrap 要求第一个帖子从一开始就有一个 active 类。使用我的 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

如果您使用的是最新的meteor版本，您需要在模板渲染之前将其设置为事件状态，我们可以使用@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 如果 bootstrap 在渲染之前需要有事件，如果他们使用它，上面的内容将起作用，如果它只是 CSS，你可以更改你的代码以使其工作，只需移动 this.$('.carousel -item').first().addClass('active'); 到 carouselList onRendered。因为现在你基本上对所有这些都做了 3 次。