Nodejs 如何在路由index.js中通过render向index.jade传递一个数组 或者一个对象参数

Nodejs 如何在路由index.js中通过render向index.jade传递一个数组 或者一个对象参数

我直接使用这样的方式

index.js中代码
var args = {
};
var sources = require('./index.json');
router.get('/', function(req, res) {
    args.title = '万万花花';
    args.yygh  = sources.yygh;
  res.render('index', { args:args});

});

我想这样因该是可以的吧 index.jade

each item in args.banner

结果抛出了错误如下：

   2| html(lang='zh-cn')
   3|   head
 > 4|     title= args.title
   5|     meta(name="keywords" content="关键词")
   6|     meta(name="description" content="描述")
   7|     meta(http-equiv="Content-Type" content="text/html; charset=utf-8")

Cannot read property 'title' of undefined

这算不算没有把参数传递进jade中


6 回复

要在 Node.js 中通过路由 index.js 向 index.jade 模板传递一个数组或对象参数，你需要确保在渲染模板时正确地将数据传递给模板。以下是详细的步骤和示例代码。

示例代码

index.js (路由文件)

首先，在你的路由文件中，你需要定义一个路由处理函数，并在其中设置你要传递给模板的数据。例如：

const express = require('express');
const router = express.Router();
const sources = require('./index.json');

// 设置传递给模板的数据
const args = {
    title: '万万花花',
    yygh: sources.yygh,
    banner: ['item1', 'item2', 'item3'] // 这是一个示例数组
};

// 定义路由处理函数
router.get('/', function(req, res) {
    res.render('index', { args: args });
});

module.exports = router;

index.jade (模板文件)

接下来，在你的 Jade 模板文件中，你可以遍历传递过来的对象和数组。例如：

html(lang='zh-cn')
  head
    title= args.title
    meta(name="keywords" content="关键词")
    meta(name="description" content="描述")
    meta(http-equiv="Content-Type" content="text/html; charset=utf-8")

  body
    h1 #{args.title}
    ul
      each item in args.banner
        li= item
    p= args.yygh

解释

  1. 定义数据：在 index.js 文件中，我们创建了一个名为 args 的对象，并设置了几个属性，包括字符串 title 和数组 banner。
  2. 渲染模板：在路由处理函数中，我们使用 res.render('index', { args: args }) 将 args 对象传递给 index.jade 模板。
  3. 遍历数据：在 index.jade 模板中，我们使用 Jade 语法来访问 args 对象中的属性。例如，title 属性被直接插入到 <title> 标签中，而 banner 数组则通过 each 循环遍历并显示在无序列表中。

错误分析

你提到的错误 Cannot read property 'title' of undefined 是因为你在 Jade 模板中直接访问了 args.title，但 args 变量可能未正确传递给模板。确保在渲染模板时正确传递了 args 对象。

通过以上步骤，你应该能够成功地将数组或对象参数从路由传递到 Jade 模板，并在模板中正确地显示这些数据。


难道不能传递一个对象吗。我传递一个字符串 title确可以访问

你用了each为什么下面的循环体不是item，另外你可以直接 jade里将args打印出来看看就什么都明白了，#{args}

好了诶 自己解决了。

args的声明要搬到回调里面吧？

根据你的描述，问题在于传递给 res.render 的参数格式不正确。你应当直接将 args 对象作为第二个参数传递给 res.render 函数，而不是将它包裹在一个额外的对象中。以下是修正后的代码示例：

index.js

const express = require('express'); // 确保你已经引入了express库
const router = express.Router();
const sources = require('./index.json');

router.get('/', function(req, res) {
    const args = {
        title: '万万花花',
        yygh: sources.yygh,
        banner: sources.banner // 假设index.json中有banner数组
    };
    res.render('index', args); // 直接将args传递给渲染函数
});

module.exports = router;

index.jade (或改为index.pug)

doctype html
html(lang='zh-cn')
  head
    title= title
    meta(name="keywords" content="关键词")
    meta(name="description" content="描述")
    meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
  body
    h1 #{yygh}
    each item in banner
      p= item

在这个例子中，args 对象被直接传递给了 res.render 函数，因此可以在 index.jade 模板文件中直接访问这些属性。注意将文件扩展名从 .jade 改为 .pug，因为 .jade 已经更新为 .pug。

如果你使用的是较旧的 .jade 文件，确保安装了 jade 包（现在推荐使用 pug）。如果使用 pug，确保你的项目中已安装了 pug。你可以通过以下命令安装：

npm install pug --save

这样，你就可以正确地将数据传递给 Jade/Pug 模板，并在模板中进行渲染。

回到顶部