循环条件渲染

Question

这是我与 ember 合作的第一个项目。

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

它应该看起来像

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 使用无逻辑模板语法。默认情况下它没有很多比较运算符。尤其是大于比较运算符。甚至没有 equals。基本上你只能检查一个变量或表达式是真还是假。

您的用例有两种选择：

添加分隔符，除非它是第一项。您可以检查第一项，因为 index 将是 0，这是错误的。
使用插件 Ember Truth Helpers，它提供了一组广泛的常用比较运算符。

作为替代方案，您也可以编写自己的 template helper，它做的比比较少，但这将是重新发明轮子，因为 Ember Truth Helpers 附带了这样的助手。

循环条件渲染

Conditional Render in Loop

handlebars.js

ember.js