Условный рендеринг в цикле - PullRequest
0 голосов
/ 11 октября 2019

Это мой первый проект с 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)}}

Спасибо за помощь.

1 Ответ

1 голос
/ 11 октября 2019

Ember использует шаблонный синтаксис без логики. Это не так много операторов сравнения по умолчанию. Особенно нет ничего похожего на больше, чем оператор сравнения. Нет даже равно . По сути, вы можете только проверить, является ли переменная или выражение истинным или ложным.

У вас есть два варианта использования:

  1. Добавить разделитель, если это не первый элемент,Вы можете проверить первый элемент, потому что index будет 0, что ложно.

  2. Используйте аддон Помощники Истины Угасания , которые предоставляютширокий набор общеизвестных операторов сравнения.

В качестве альтернативы вы также можете написать свой собственный шаблонный помощник , который выполняет сравнение меньше, но при этом изобретает колесокак Помощники Истины Истины отправляют с таким помощником.

...