I'm presently learning iterations in Pug/Jade. I'd like to use this tool going forward.
In the code below, you basically have what's supposed to amount to a slider.
In the first instance, the #{i} is supposed to return values 1-4 to each listed class, but instead compiles just the same. Though I've seen this technique work for others.
Secondly, with regard to my data array, I've been able to get the title value to show in each section, however, getting the button value to appear within the same container seems to be the challenge.
- 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
The code above returns the following:
<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>
Which is great, but not what I need. What I would really like to see compiled is the following:
<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>
The pen can be viewed here: https://codepen.io/jobaelish/pen/jYyGQM?editors=1000
What must I do with my code to get the desired result?
UPDATE:
Ok. So, a new bit of code. I was able to solve some of the issues I initially had, resolving the class iteration by using + i instead of #{i}.
Secondly, by adding a block tag to my Pug mixin, I was able to include the links, no prob.
Here's the new code:
- 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
Which renders:
<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>
So, the only thing left is to get the classes to iterate properly when compiled. I've gotten some result of either style-0, style-5, and now style-NaN.
How can I now get this to work as style-1, style-2, etc?
To answer your first question: Attribute interpolation (expressions such as class='slide-#{i}') is not supported anymore in Pug. Try doing class='slide-' + i, instead.
On the second question: You have two separate loops, which is why the buttons and headings are separate. If you want them to appear in the same section containers, you need to somehow put both in one loop, so that one iteration adds both.
On your third question: I'm not entirely sure I understood the question, but this is a pen with how I would fix it:
.slide-container
each item, i in data
section(class='slide-' + (i + 1))
+list(item.title)
a(href='#')= item.button