在 Jade（目前称为“Pug”）模板引擎中循环

Posted 2023-02-22

【中文标题】在 Jade（目前称为“Pug”）模板引擎中循环

【英文标题】：Loop in Jade (currently known as "Pug") template engine

【发布时间】：2012-02-02 11:00:57

【问题描述】：

我想使用像for(int i=0; i<10; i++) 这样的简单循环。

如何在 Jade 引擎中使用它？我正在使用 Node.js 并使用 expressjs 框架。

【参考方案1】：

Pug（从“Jade”重命名）是一个用于全栈 Web 应用程序开发的模板引擎。它为编写 html 提供了简洁的语法并保持严格的空格缩进（如 Python）。它已使用 javascript API 实现。该语言主要支持两种迭代结构：each 和 while。 'for' 可以用来代替'each'。请在此处查阅语言参考：

https://pugjs.org/language/iteration.html

这是我的一个 sn-ps： each/for iteration in pug_screenshot

【参考方案2】：

一种不寻常但很漂亮的方式

无索引：

each _ in Array(5)
  = 'a'

将打印：aaaaa

带索引：

each _, i in Array(5)
  = i

将打印：01234

注意事项：在上面的例子中，我已经将jade的each迭代语法的val参数赋值给_，因为它是必需的，但总是会返回undefined。

【参考方案3】：

这是一个非常简单的jade 文件，其中有一个循环。 Jade 对空白非常敏感。在循环定义行 (for) 之后，您应该给想要进入循环的内容缩进（制表符）。你可以在没有 的情况下做到这一点：

- var arr=['one', 'two', 'three'];
- var s = 'string';
doctype html
html
    head
    body
        section= s
        - for (var i=0; i<3; i++)
            div= arr[i]

【讨论】：

您知道如何去除以这种方式生成的元素之间的空格吗？

@vsync 一个技巧是使用span 而不是div

我的意思是一般。这样，元素之间总会有一个空格，因为玉语法的工作方式有一个new line 原因。

【参考方案4】：

只是添加另一种可能性，因为它可能会帮助尝试遍历数组并保持计数的人。例如，下面的代码会遍历一个名为 items 的数组，并且只显示前 3 项。注意each 和if 是原生玉，不需要连字符。

ul
  - var count = 0;
  each item in items
    if count < 3
      li= item.name
    - count++;

【讨论】：

非常感谢您：- count++;

【参考方案5】：

您还可以使用while 循环加快处理速度（请参阅此处：http://jsperf.com/javascript-while-vs-for-loops）。恕我直言，也更简洁易读：

i = 10
while(i--)
    //- iterate here
    div= i

【讨论】：

是的，但是您的 while 循环从 10 开始并向下运行。这会将项目以相反的顺序添加到 DOM。你可能不希望这样。

@PhillipBurch 也可以反转：var i = 0; while (i++ < 10) console.log(i-1) //=> 0123456789

【参考方案6】：

例如：

- for (var i = 0; i < 10; ++i) 
  li= array[i]
- 

详细文档请见https://github.com/visionmedia/jade。

【讨论】：

嗨乔，我这里有个问题：LINK，我通过alessioalex解决了，但现在我有新问题：如果我的数据库结构是这样的，那么一张专辑我可以存储很多歌曲，对吗？以及为什么在 app.js 中这样做：var Album = db.model('Album'); var album = new Album(); album.songs.push(_id:'4f046b3bf71f5ed522000002'); 并且我收到错误无法调用未定义 的方法“调用”我如何存储到正确的位置？

这可能是因为SongSchema 没有在album.js 中定义。

我有一个数组 x,console.log(x, x.length);告诉我这个： [name:a,done:true,name:c] 0 是正常的吗？我错过了什么

【参考方案7】：

使用节点我收集了 @stuff 的东西并像这样访问它：

- each stuff in stuffs
  p
    = stuff.sentence

【讨论】：

这是根据jade-lang.com/reference/iteration 执行此操作的规范方法。此外，您实际上也不需要第一行 each 前面的 -

Pug 错误，如果你有一个 - （破折号）在每个前面。

你能解释一下@stuff吗？为什么开头有@？