ember.js 循环中的条件渲染

mcvgt66p  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(147)

这是我和ember的第一个项目。
我正在尝试呈现一个语言转换器组件。到目前为止,它呈现得还不错,但是我想在每种语言后面附加一个空格,而且它不是最后一个。
它应该类似于
德国**|法国|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)}}

谢谢你的帮助。

x6h2sr28

x6h2sr281#

Ember使用了一个无逻辑的模板语法。默认情况下,它没有太多的比较运算符。尤其是没有像 * greater than a这样的比较运算符。甚至没有 equals 这样的比较运算符。基本上,你只能检查一个变量或表达式是真还是假。
对于您的使用情形,您有两个选项:
1.添加分隔符,除非它是第一项。您可以检查第一项,因为index将是0,这是错误的。
1.使用插件Ember Truth Helpers,它提供了一组广泛的常用比较运算符。
作为一个替代方案,你也可以写你自己的template helper,做一个小于比较,但这将是重新发明的车轮作为ember真理助手船舶与这样的助手。

相关问题