带有HTML数据元素的Jade / Pug

Question

我在代码中成功使用以下行：

.div(data-text='text')

但是我正在一个多语言站点上从JSON读取带有w / JQuery的语言。在这种情况下，将文本放入简单的HTML p标签的常用方法是：

p(tkey='text')

我想在数据文本div中使用相同的方法：

.div(data-text=(tkey='text'))

该问题可能是由于我想在如下循环中使用它而引起的：

- for(var i = 1; i < 5; i++) {
    .div(data-text='data' + i)
- }

有可能吗？语法是什么？

谢谢大家！

Answer 1

Pug有一些循环的docs are here结构。

要做每件事，我建议使用每个：

each val in [1, 2, 3, 4, 5]
  div(data-text= 'data' + val)

each的别名为for，因此可以执行相同的操作：

for val in [1, 2, 3, 4, 5]
  div(data-text= 'data' + val)

如果要遍历更多的值，则转到while语法：

- var index = 0;
- var limit = 25;
while index < limit
    div(data-text= 'data' + index++)

但是，通常您要遍历现有对象数组，例如数据库中的结果集。如果要在每个循环中使用索引，则将其添加为第二个参数：

- var results = ["Adam", "Bonnie", "Clara"];
each person, index in results
  p(data-text= 'data' + index)= person

将产生此HTML：

<p data-text='data1'>Adam</p>
<p data-text='data2'>Bonnie</p>
<p data-text='data3'>Clara</p>

---

还要注意，.div创建了以下HTML：

<div class="div"></div>

如果您只想要一个div，则省略前导期间，div会产生以下内容：

<div></div>