流星和 Bootstrap 旋转木马

Question

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

Bootstrap 要求第一个 post 从一开始就有一个 class 的 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 为项目添加活动 class。但是，这会将活动 class 添加到所有这些。

我仍然是 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次。

流星和 Bootstrap 旋转木马

Meteor and Bootstrap Carousel

javascript

jquery

twitter-bootstrap

meteor

meteor-blaze