Класс условных элементов Svelte сообщается как синтаксическая ошибка

Question

Я делаю 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= блоки для каждого возможного результата, но это огромный объем работы.

Answer 1

Блоки ({#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] селекторы вместо.

Answer 2

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

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

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

Answer 3

Как указано в https://svelte.dev/docs#class_name , для работы требуется дополнительная переменная JS, если еще внутри класса

вот пример, где каждый цикл повторяется от a до b , и когда , если это правда , будет применяться css

      {#each Array.from(Array(b+1).keys()).slice(a) as i }

    <div class="{ i===4 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}

пример (от 1 до 15):

      {#each Array.from(Array(15+1).keys()).slice(1) as i }

    <div class="{ i===3 ? "border-l-2 border-blue-500" : ""}  p-3 space-y-4">
     some sample text
    </div>
{/each}