循环中的条件渲染

Question

这是我的第一个余烬项目。

我正在尝试呈现语言转换组件。到目前为止，它还可以，但是我想在每种语言之后添加一个空格，只要它不是最后一种即可。

看起来应该像

DE | FR | EN ...等，其中|实际上是一个div

这是我尝试过的...

<div class="col-4 text-right language-changer">
  {{#each languages as |lang index|}}
    {{#if lang.isCurrent}}
      <span>{{lang.designation}}</span>
    {{else}}
      <button {{action "changeLanguage" lang.key}}>{{lang.designation}} 
      </button>
    {{/if}}
    {{#if (index < languages.length)}}
      <div class="spacer">|</div>
    {{/if}}
  {{/each}}
</div>

我读到，if仅适用于属性...但是如何基于当前循环索引进行评估？

我应该用什么代替

 {{#if (index < languages.length)}}

感谢您的帮助。

Answer 1

Ember使用无逻辑模板语法。默认情况下，它没有很多比较运算符。特别是没有什么比greater than比较运算符更好的了。甚至没有一个等于。基本上，您只能检查变量或表达式是真还是假。

您有两种使用情况的选择：

1. 添加分隔符，除非它是第一项。您可以检查第一项，因为index将是0，这很虚假。

2. 使用插件Ember Truth Helpers，它提供了一系列众所周知的比较运算符。

[作为替代，您也可以编写自己的template helper，其效果不如比较，但随着Ember Truth Helpers附带此类帮助，它将重新发明轮子。