如何在循环的第一项中设置活动class？

Question

我正在使用：

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.2.1
DEBUG: jQuery            : 1.11.3
DEBUG: Ember Simple Auth : 1.0.0
DEBUG: -------------------------------

虽然 Ember 使用 Handlebars，而 Handlebars 有 built in support for loop operators，但不支持 @index、@first、@last in Ember（不知道这个功能是怎么丢失的）

（each 循环的语法已经改变了好几次，所以我可能在这里使用过时的例子）

我无法编码：

  {{#each model.images as |image| }}
  <div class="item {{if @first "active" }}" data-slide-number="{{@index}}">
    <img src="{{image.image}}">
  </div>
  {{/each}}

正在使用：

conditionals in attribute bindings
@index 和 @first 车把运算符（Ember 不支持）

前段时间been hacked into ember有一种访问索引的方法，所以我现在可以这样做：

  {{#each model.images as |image index| }}
  <div class="item {{if @first "active" }}" data-slide-number="{{index}}">
    <img src="{{image.image}}">
  </div>
  {{/each}}

但这只会影响 @index 替换。我找不到关于 @first 或 @last 的任何信息。我可以通过 using a helper 破解它，但这可能不再适用于当前的 ember 版本，如果可以，它肯定会在几周内崩溃。无论如何，可能有一些粗糙的边缘使它无法使用。

或 I could create a controller for my collection 这样我就可以做各种奇怪的事情来获得 .first 或 .last 属性。但是，为了获得如此简单的功能，这似乎真的太过分了。

Other frameworks 支持这个开箱即用的简单功能。是我找不到，还是真的Ember不支持？

Answer 1

您可以使用 ember-truth-helpers 创建正确的模板逻辑。

{{#each model.images as |image index| }}
  <div class="item {{if (eq index 0) "active" }}" data-slide-number="{{index}}">
    <img src="{{image.image}}">
  </div>
{{/each}}

有关如何重新创建 @index、@key 和 @first Handlebars 表达式的详细信息，请参阅 my other answer。

如何在循环的第一项中设置活动class？

How to set active class in first item of loop?

handlebars.js

ember.js