流星空格键

Question

我在访问 Collection.find() 返回的索引时遇到问题。在 HTML 中，我正在创建一个旋转木马，我想让图像动态化。在使其动态化之前，它是这样的：

<div class="carousel-inner">
  <div class="item active">
    <img src="img/homepage/sliders/1.jpg">
  </div>
  <div class="item">
    <img src="img/homepage/sliders/2.jpg">
  </div>
</div>

实施后，这是新代码：

<div class="carousel-inner">
  {{#each sliders}}              
     <div class="item active">
       <img src="{{this.url}}">
     </div>
  {{/each}}
</div>

这是我的 JS 的样子：

Template.homepageSlider.helpers({
    sliders: function() {
        return HomepageSliders.find({}, {fields: {url:1}}).fetch();
    }
});

这种方法很好用，但我只想在第一个索引上添加 class 'active'。我应该怎么做？

非常感谢！

Answer 1

像这样的东西应该有用。

JS:

Template.homepageSlider.helpers({
    sliders: function() {
        return _.map(HomepageSliders.find({}, {fields: {url:1}}).fetch(),
                     function(val, index) { 
                          return {value: val, 
                                  class: (index == 0 ? "item active" : "item")} 
                     });
    }
});

HTML:

<div class="carousel-inner">
  {{#each sliders}}              
     <div class="{{this.class}}">
       <img src="{{this.value.url}}">
     </div>
  {{/each}}
</div>

流星空格键

Meteor Spacebar

html

javascript

meteor

spacebars