我目前在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}
来解决类迭代问题。
其次,通过在我的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>
因此,唯一剩下的就是让类在编译时正确迭代。我得到了style-0
,style-5
和现在style-NaN
的结果。
我现在如何才能将其作为style-1
,style-2
等工作?
答案 0 :(得分:1)
回答第一个问题:Pug中的属性插值(class='slide-#{i}'
等表达式)为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