如何使用 Pug/Jade 次迭代来创建具有不同内容的多个元素？

Question

我目前正在学习 Pug/Jade 中的迭代。我想继续使用这个工具。

在下面的代码中，您基本上拥有了一个滑块。

在第一个实例中，#{i} 应该 return 值 1-4 到每个列出的 class，但编译却完全相同。虽然我已经看到这种技术对其他人有用。

其次，关于我的 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

上面的代码 return 如下：

<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}.

解决 class 迭代

其次，通过向我的 Pug mixin 添加一个 block 标签，我能够包含链接，没问题。

这是新代码：

- 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>

因此，唯一剩下的就是让 classes 在编译时正确迭代。我得到了 style-0、style-5 和现在的 style-NaN.

的一些结果

现在我怎样才能让它像 style-1、style-2 等一样工作？

Answer 1

回答你的第一个问题：属性插值（class='slide-#{i}'等表达式）在Pug中是not supported anymore。尝试做 class='slide-' + i，而不是。

关于第二个问题：你有两个独立的循环，这就是为什么按钮和标题是分开的。如果您希望它们出现在相同的 section 容器中，您需要以某种方式将两者放在一个循环中，以便一次迭代将两者相加。

关于你的第三个问题：我不完全确定我理解了这个问题，但这是 pen 我将如何解决它：

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

如何使用 Pug/Jade 次迭代来创建具有不同内容的多个元素？

How to use Pug/Jade iterations to create multiple elements with different content?

jade4j

pugjs

pug