Как использовать итерации Pug/Jade для создания нескольких элементов с разным контентом?

Question

В настоящее время я изучаю итерации в Pug/Jade. Я хотел бы использовать этот инструмент в будущем.

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

Во-первых, #{i} должен возвращать значения 1-4 каждому перечисленному классу, но вместо этого компилирует точно так же. Хотя я видел, как эта техника работает для других.

Во-вторых, что касается моего data массив, я смог получить title значение, чтобы показать в каждом sectionОднако, получая button Похоже, что значение в одном и том же контейнере является проблемой.

- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}]


.slide-container
  - var i=0;
    while (i++ < 4)
      mixin list(title)
        section(class='slide-#{i}')
            h2= title


  each item in data
    +list(item.title)
    a(href='#')= item.button

Код выше возвращает следующее:

<div class="slide-container">
    <section class="slide-#{i}">
      <h2>Home Run</h2>
    </section><a href="#">It's a win</a>
    <section class="slide-#{i}">
      <h2>Testing</h2>
    </section><a href="#">Tested</a>
    <section class="slide-#{i}">
      <h2>Foreground</h2>
    </section><a href="#">Background</a>
    <section class="slide-#{i}">
      <h2>Forest</h2>
    </section><a href="#">Trees</a>
</div>

Что здорово, но не то, что мне нужно. То, что я действительно хотел бы видеть скомпилированным, является следующим:

<div class="slide-container">
    <section class="slide-1">
      <h2>Home Run</h2>
      <a href="#">It's a win</a>
    </section>
    <section class="slide-2">
      <h2>Testing</h2>
      <a href="#">Tested</a>
    </section>
    <section class="slide-3">
      <h2>Foreground</h2>
      <a href="#">Background</a>
    </section>
    <section class="slide-4">
      <h2>Forest</h2>
      <a href="#">Trees</a>
    </section>
</div>

Перо можно посмотреть здесь: https://codepen.io/jobaelish/pen/jYyGQM?editors=1000

Что я должен сделать с моим кодом, чтобы получить желаемый результат?

---

ОБНОВИТЬ:

Хорошо. Итак, новый кусочек кода. Я смог решить некоторые проблемы, которые у меня были изначально, разрешив итерацию класса с помощью + i вместо #{i},

Во-вторых, добавив block тег к моему Pug Mixin, я смог включить ссылки, нет проблем.

Вот новый код:

- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}]


mixin list(title)
  h2= title
  block

.slide-container
  each item in data
    //- - var i = 0;
    //-   while i < 4
    section(class='slide-' + i++)
      +list(item.title)
        a(href='#')= item.button

Что делает:

<div class="slide-container">
  <section class="slide-NaN">
    <h2>Home Run</h2><a href="#">It's a win</a>
  </section>
  <section class="slide-NaN">
    <h2>Testing</h2><a href="#">Tested</a>
  </section>
  <section class="slide-NaN">
    <h2>Foreground</h2><a href="#">Background</a>
  </section>
  <section class="slide-NaN">
    <h2>Forest</h2><a href="#">Trees</a>
  </section>
</div>

Таким образом, остается только заставить классы правильно итерировать при компиляции. Я получил какой-то результат style-0, style-5, и сейчас style-NaN,

Как я могу теперь заставить это работать как style-1, style-2, так далее?

Answer 1

Чтобы ответить на ваш первый вопрос: интерполяция атрибутов (такие выражения, как class='slide-#{i}') больше не поддерживается в Pug. Попробуй сделать class='slide-' + iвместо.

По второму вопросу: у вас есть две отдельные петли, поэтому кнопки и заголовки разделены. Если вы хотите, чтобы они появились в том же section контейнеры, вам нужно как-то поместить оба в один цикл, чтобы одна итерация добавила оба.

На ваш третий вопрос: я не совсем уверен, что понял вопрос, но это ручка с тем, как бы я это исправить:

.slide-container
  each item, i in data
    section(class='slide-' + (i + 1))
      +list(item.title)
        a(href='#')= item.button