meteor - 如何使用空格键 {{#if}} 标签获取第一个集合元素？

Question

我正在尝试将第一张图片设置为 Bootstrap Carousel 中的“活动项目”。那么，有没有办法让集合中的第一个元素与其他元素不同？

      {{#each pictures}}
        {{#if @first}}
              <div class="item active">
                 <img src="/pictures/{{fileName}}" alt="" />
            </div>
       {{else}}
          <div class="item">
             <img src="/pictures/{{fileName}}" alt="" />
          </div>
       {{/if}}
     {{/each}}

呈现的页面仅显示 {{else}} 语句中的内容。曾尝试使用 {{if @first}}，但它对我不起作用。

Answer 1

这与模板中需要索引的问题非常相似。您需要映射pictures并标记您需要区别对待的那个。例如：

Template.myPictures.helpers({
  pictures: function() {
    return Pictures.find().map(function(picture, index) {
      if (index === 0)
        picture.isFirst = true;

      return picture;
    });
  }
});

然后，您可以isFirst像这样在模板中使用：

{{#each pictures}}
  {{#if isFirst}}
    <div class="item active">
      <img src="/pictures/{{fileName}}" alt="" />
    </div>
  {{else}}
    <div class="item">
      <img src="/pictures/{{fileName}}" alt="" />
    </div>
  {{/if}}
{{/each}}

请注意，CoffeeScript@不适用于模板。要了解有关模板上下文的更多信息，请参阅此。

Answer 2

这不完全是您所要求的，但您可以在回调active中使用 jQuery制作第一个项目。rendered

Template.myPictures.rendered = function () {
  this.$('.item').first().addClass('active');
};