Nodejs 使用jade写页面时，利用each怎么逆序输出啊？感觉在网上找到的jade的介绍都好少……

Nodejs 使用jade写页面时，利用each怎么逆序输出啊？感觉在网上找到的jade的介绍都好少……

大概代码类似下面：

  • if(docs.length) each result in docs div(class=‘field’) p #{result.comment_id} #{result.user_id} #{result.post_time}
  • else p 没有任何新消息！

得到的结果是根据comment_id正序排列的，1、2、3。。。 但是我希望的效果是。。。3、2、1,没用过jade不知道jade里面有没有这样的语法？或者有没有其他的实现方法？ 谢谢大家了！


6 回复

针对你提出的问题，如何在使用 Jade（现称为 Pug）模板引擎时实现逆序输出数据，可以通过一些简单的技巧来实现。Jade/Pug 本身没有直接提供逆序输出的功能，但你可以通过 JavaScript 的数组操作来达到目的。

示例代码

假设我们有一个包含评论对象的数组 docs，每个对象都有 comment_id, user_id 和 post_time 属性。我们可以先对数组进行逆序处理，然后再使用 Jade/Pug 的 each 循环来遍历并渲染这些对象。

JavaScript 部分

首先，在 Node.js 中处理数据部分：

const docs = [
    { comment_id: 1, user_id: 'user1', post_time: '2023-01-01' },
    { comment_id: 2, user_id: 'user2', post_time: '2023-01-02' },
    { comment_id: 3, user_id: 'user3', post_time: '2023-01-03' }
];

// 对数组进行逆序
docs.reverse();

Jade/Pug 模板部分

接下来，在 Jade/Pug 模板中使用 each 循环来遍历并显示这些数据：

if docs.length
    each result in docs
        div.field
            p= result.comment_id + ' ' + result.user_id + ' ' + result.post_time
else
    p 没有任何新消息！

解释

  1. 数据处理：在 Node.js 中，我们首先定义了一个包含多个评论对象的数组 docs。然后，我们调用了 reverse() 方法来将数组中的元素顺序反转。这样做的结果就是数组中的元素会从最后一个开始到第一个结束。

  2. 模板渲染：在 Jade/Pug 模板中，我们使用了 each 关键字来遍历 docs 数组中的每一个元素。由于我们在服务器端已经对数组进行了逆序处理，因此在这个循环中，数组将会以逆序的方式被遍历，从而实现了逆序输出的效果。

通过这种方式，你可以轻松地在 Node.js 应用中使用 Jade/Pug 来实现逆序输出数据的需求。


额，代码格式乱了,重试一下…… -if(docs.length) each result in docs div(class = ‘field’) p #{result.comment_id} -else p no result.

好吧，我的解决办法是数据穿过来之前先让它倒序……

应该是出数据库里提取的时候倒序吧。我感觉这个逻辑不适合放在模板里面。http://expressjs.jser.us/jade.html jade文档

是的我的解决方法就是数据传来钱倒序，但是后来发现jade里面有for可以用，同样可以实现~~

要在Jade模板中实现逆序输出数组元素，可以先在后端JavaScript代码中将数组反转，然后再传递给Jade模板进行渲染。下面是具体步骤和示例代码。

示例代码

Node.js 后端代码（Express.js）

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

app.get('/', (req, res) => {
    let docs = [
        { comment_id: 1, user_id: 'user1', post_time: '2023-01-01' },
        { comment_id: 2, user_id: 'user2', post_time: '2023-01-02' },
        { comment_id: 3, user_id: 'user3', post_time: '2023-01-03' }
    ];

    // 反转数组
    docs = docs.reverse();

    res.render('index', { docs });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

Jade模板文件（index.jade）

doctype html
html
  head
    title Jade Reverse Example
  body
    if docs.length
      each result in docs
        div.field
          p #{result.comment_id} #{result.user_id} #{result.post_time}
    else
      p没有任何新消息！

解释

  1. 数组反转：在Node.js后端代码中，使用docs.reverse()将数组docs中的元素顺序反转。
  2. 传递数据：将反转后的数组通过res.render传递给Jade模板。
  3. 模板渲染：在Jade模板中使用each循环遍历传入的数组，并按逆序输出每个元素。

这样，当你访问该页面时，结果将按照comment_id逆序显示，即3、2、1。

回到顶部