Ember - 如果每个项目中都有最后一项

The*_*nty 1 ember.js

我试图在 ember 中的 each 中的最后一个项目下显示一段标记——我尝试过类似@last 的东西——但它返回了一个错误

<ul>
  {{#each people as |person index|}}
    <li>Hello, {{person.name}}! You're number {{index}} in line</li>
  {{/each}}
</ul>
Run Code Online (Sandbox Code Playgroud)

jel*_*han 6

Ember 的{{each}}模板助手没有提供一种简单的方法来做到这一点。

正如您可能已经想到的那样,您可以使用{{unless index}}有条件地渲染第一个对象上的内容。这是有效的,因为索引从零开始并且0被认为是错误的。

您可以结合ember-truth-helpersember-math-helpers实现与最后一个元素相当的东西。两者都是维护良好的 ember 插件,提供全套模板助手。

Ember-truth-helpers 提供了一个eq帮助程序,增加了对模板中相等比较的支持。Ember-math-helpers 提供了一个sub帮助器来从模板中的另一个值中减去一个值。将它们结合起来,我们可以构建一个仅对最后一个元素为真的条件:

{{#each items as |item index|}}
  <li>
    {{item}}
    {{#unless index}}(first){{/unless}}
    {{#if (eq index (sub items.length 1))}}(last){{/if}}
  </li>
{{/each}}
Run Code Online (Sandbox Code Playgroud)

您会在此处找到一个 ember twiddle 演示该方法:https ://ember-twiddle.com/6ea05a2e9c884bd772eefabc91173d08?openFiles = templates.application.hbs%2C

如果数组是一个Ember.NativeArray. NativeArrayember 提供了一个lastObject属性,它指向数组中的最后一项。正如@Gaurav 在评论中指出的那样,您可以直接使用那个进行相等比较:{{#if (eq item items.lastObject)}}(last){{/if}}但请注意,如果数组具有重复的元素,这可能会产生错误的结果。

  • `{{#if (eq item items.lastObject)}}(last){{/if}}` (5认同)