Класс условного элемента Svelte сообщил о синтаксической ошибке

Я делаю блок if на Svelte Guide для блоков if. Это кажется достаточно простым, но Svelte считает, что это синтаксическая ошибка:

[!] (svelte plugin) ParseError: Unexpected character '#'
public\js\templates\works.html
3:     <div class="slides js_slides">
4:       {#each works as work, index}
5:         <div class="js_slide {#if index === currentIndex }selected{/if} {#if index === 0 }first{/if}">
                                ^
6:           <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
7:         </div>

Почему {#if index === currentIndex } не считается действительным? Как сделать условное в Svelte?

Не могу создать отдельные блоки class= для всевозможный исход, но это огромный объем работы.


5
4 712
2

Ответы:

Решено

Блоки ({#if..., {#each... и т. д.) Нельзя использовать внутри атрибутов - они могут только определять структуру вашей разметки.

Вместо этого принято использовать тернарные выражения ...

<div class="
  js_slide
  {index === currentIndex ? 'selected' : ''}
  {index === 0 ? 'first' : ''}
">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

... или использовать помощника:

<!-- language: lang-html -->

<div class="js_slide {getClass(work, index, currentIndex)}">
  <img src="/images/work/screenshots/{ works[index].slug }-0.{ works[index].imageExtension }"/>
</div>

Некоторые люди предпочитают делать такие вещи, как data-selected={index === currentIndex} и data=first={index === 0}, и вместо этого использовать стиль, основанный на селекторах [data-selected=true].


Начиная с Svelte 2.13 вы также можете делать

<div class:selected={index === currentIndex}>...</div>

См. https://svelte.dev/docs#class_name