Nodejs 新手学习jade模板引擎，使用问题详情看代码。each 循环的变量可以这样定义么？express -V 4.9.0

Nodejs 新手学习jade模板引擎，使用问题详情看代码。each 循环的变量可以这样定义么？express -V 4.9.0

QQ图片20140929144748.jpg

3 回复

好的，根据你的描述，我将为你编写一个关于Node.js新手在学习Jade模板引擎时遇到的each循环使用问题的帖子。

帖子内容

Nodejs 新手学习jade模板引擎，使用问题详情看代码。each 循环的变量可以这样定义么？express -V 4.9.0

大家好，我是Node.js的新手，最近在学习如何使用Jade模板引擎来渲染页面。我在使用each循环的时候遇到了一些困惑，希望各位大神能够帮我解答一下。

问题描述：

我在服务器端使用Express框架（版本4.9.0）渲染一个Jade模板文件。在模板中，我想遍历一个数组并显示每个元素。我的代码看起来像这样：

doctype html
html
  head
    title= pageTitle
  body
    h1= message
    ul
      each val in items
        li= val

在服务器端，我传递了一个名为items的数组给模板，数组内容如下：

res.render('index', {
  pageTitle: 'Hello World',
  message: 'This is a test',
  items: ['Item 1', 'Item 2', 'Item 3']
});

但是当我运行程序时，发现列表项并没有正确地显示出来。我怀疑是each循环的语法或者用法有误。

请问，这样的each循环定义方式是否正确？如果不对，请问正确的写法应该是什么？

谢谢大家！

解答：

你提供的代码片段中each循环的语法是正确的。Jade模板引擎（现在称为Pug）确实支持这种形式的each循环。确保你在服务器端正确地传递了items数组，并且在模板文件中正确引用了它。

以下是完整的示例，包括服务器端代码和Jade模板文件：

服务器端代码（使用Express）：

var express = require('express');
var app = express();

app.set('views', './views'); // 设置视图目录
app.set('view engine', 'pug'); // 设置默认模板引擎为Pug

app.get('/', function(req, res) {
  res.render('index', {
    pageTitle: 'Hello World',
    message: 'This is a test',
    items: ['Item 1', 'Item 2', 'Item 3']
  });
});

app.listen(3000);
console.log('Server running on port 3000');

Jade模板文件（index.pug）：

doctype html
html
  head
    title= pageTitle
  body
    h1= message
    ul
      each val in items
        li= val

如果你仍然遇到问题，请检查是否有其他错误信息或检查数据是否正确传递到了模板中。希望这能帮助你解决问题！


没用过Jade，不过你的JS代码明显要用<script>包着吧，或是从后端传过来。

对于 Node.js 初学者来说，学习 Jade（现在更名为 Pug）模板引擎时可能会遇到一些困惑，尤其是在使用 each 循环时。在您的问题中提到的 each 循环的变量定义，让我们来看一个具体的例子。

首先，确认您正在使用的 Express 版本是 4.9.0，这在 Jade/Pug 的语法上是没有问题的。each 循环的基本语法是在 Jade/Pug 中遍历数组或对象。

示例代码

假设我们有一个简单的数组 users，我们希望在页面上显示每个用户的信息：

doctype html
html
  head
    title 用户列表
  body
    h1 用户列表
    ul
      each user in users
        li= user.name

在这个例子中，each user in users 定义了一个循环，在每次迭代时将当前元素赋值给 user 变量，并在 <li> 标签内输出 user.name。

服务器端代码示例

为了在 Express 应用中使用这段 Pug 模板，您可以编写以下服务器端代码：

const express = require('express');
const app = express();

app.set('view engine', 'pug');

const users = [
  { name: '张三' },
  { name: '李四' },
  { name: '王五' }
];

app.get('/', (req, res) => {
  res.render('index', { users });
});

app.listen(3000);

解释

  • Pug 模板：each user in users 正确地定义了循环变量 user，并在每次迭代中将其设置为数组 users 的当前元素。
  • 服务器端代码：我们定义了一个 users 数组，并在路由处理函数中将它传递给视图。

这段代码展示了如何正确使用 each 循环在 Pug 模板中遍历数组。确保您已经安装了 Pug 模板引擎，并且在 Express 应用中正确设置了视图引擎。

回到顶部