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

【问题标题】：How Do I Get First Collection Element Using Spacebars {{#if}} Tag?如何使用空格键 {{#if}} 标签获取第一个集合元素？
【发布时间】：2014-10-07 04:33:43
【问题描述】：

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

      {{#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}}，但它对我不起作用。

【问题讨论】：

标签： meteor spacebars

【解决方案1】：

这与needing an index in your template 的问题非常相似。您需要映射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 的 @ 在模板中不起作用。要了解有关模板上下文的更多信息，请参阅this。

【讨论】：

好主意！当 Bootstrap 更改活动项然后光标更新时会发生什么？空格键是否尊重更改？
我认为我会再次将第一项标记为活动。对于常规游标，情况并非如此，但因为我们使用的是map，所以我不确定，因为 blaze 最近改变了类的保存方式。您需要尝试一下，看看会发生什么。如果您可以捕捉到更改哪个图片处于活动状态的事件，您可以更改一些内部状态，然后在地图中使用该状态。当可以删除图片时，这会变得很棘手。您需要考虑所有情况并明确定义行为。

【解决方案2】：

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

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

【讨论】：

是的，这可能也不错，前提是在模板渲染时图片实际上已经准备好了（例如，使用了waitOn）。
这个解决方案也有效。如此专注于车把，以至于我没有想到任何其他解决方案.. 谢谢！