【nodejs+ejs】如何给模板传参数?

113 篇文章 0 订阅



As a real beginner in EJS, I have two charts in my html page, so I want to use my partial twice:

<% include partials/spider-chart.ejs %>

But I need to pass some parameters inside the ejs to differentiate between graphs.

What is the best way?



I think you want to render two different charts using same partial ejs template, just by providing different data(within the main ejs file).

You can just define a variable, which will be assigned to the data, which the first chart will use, than include the chart.ejs file, again change the data, and include the partial ejs file(chart.ejs) again, so now you have two files which can use same variable(data), but can plot different chart based on value assigned to data.

For Example:

<% var data= 'data to be used by first chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

// re-initializing data for second chart
<% data= 'data to be used by second chart(parameter)'; %>
<% include partials/spider-chart.ejs %>

where your spider-chart.ejs file could be something which will use data

spider-chart.ejs

    <li>
        <%= data %> // just an example
    </li>

here, as you use data, the data variable accessed by both charts will be different because you are reassigning values for data before every chart.


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这个系统其实是出于学习nodejs的目的而改写的系统。 原来的系统前端使用了extjs4.2.1,后端使用了PHP5.4和ZEND框架开发,后台据库是用mongodb2.2.2。 我抽离出了原来系统中的账户管理,角色管理,菜单管理,权限管理这4个部分, 我想这4个部分,基本上所有的系统都会用到。具有一定的普遍性。所以将这4个部分用nodejs重新改写了。 该系统目前使用模块有express,ejs,connect-mongo,mongodb,express-partials,connect-flash,fibers,wind等 其实wind模块这次系统中没有使用。可以将它排除出去。我是出于学习wind的目的,才加入这个模块的。 本来准备使用wind模块,是为了实现同步的目的,由于后来改用了fibers模块之后,就没有使用它。这里说明一下 不是fibers要比wind好,而是我暂时不能理解wind,或则是说对wind的研究不够吧。 众所周知nodejs是推崇异步模式。但是这个系统是从php过来的,而php的代码是同步模式的写法,所以为了在改写的过程中 希望 1是代码改动最少 2是同步写法更加适合思维习惯。而且代码可读性高的目的,用到了fibers。 这个系统的源代码中有些js文件里保留了一些原来的PHP代码,这是出于代码对比的目的。 是让大家了解原来的php代码是怎么实现的,用nodejs之后是如何改写的。通过对比,大家会发现 其实通过使用fibers之后,几乎两者是一模一样的。 还有源代码中还保留了一些被注释掉的函,有些是用到了wind,有些是用到了fibers,有些是直接异步的写法。 这些内容都是在开发过程中我不断尝试后的产物。我花了1周的时间才实现了一个递归的调用,而且还是同步的方式。 到目前为止,我还不能理解在异步模式下实现递归调用函。比如说源代码中有个函getMenuTree,菜单下面可能有子菜单, 子菜单的下面可能还有菜单。所以是一个递归的过程。我现在是同步的写法实现了这个函,如果有人能够提供异步写法实现的递归函并 emai给我,我不胜荣幸。 在使用本系统之前,必须要安装nodejs 0.10.10,mongodb2.2.2,python2.7.5至于安装的方法请googel解决。 将源代码下载之后,解压到某个目录下,比如说d:\nodejs\umav4simple目录。 进入到那个目录, a)运行以下命令 npm install express npm install ejs npm install connect-mongo npm install mongodb npm install express-partials npm install connect-flash npm install fibers npm install wind 尽管在源代码中已包含了这些模块,但是最好还是要重新运行一遍。 因为有些模块可能需要重新的编译。 比如说fibers模块,我在window下运行npm install fibers的时候编译了一个win32-ia32-v8-3.14 而在linux下重新编译了linux-ia32-v8-3.14。所以说根据操作系统的不同,可能会有一些不同。 以免造成想不到的错误。 b)打开settings.js,并且将你的mongodb的设置改写并保存。 c)运行node app.js或则node cluster.js 如果没有提示错误的话,那么就说明环境配置成功了。 d)通过以下的URL可以在mongodb中追加一些据,不过只能运行一次。否则会重复追加据。 浏览器上输入 http://localhost:3000/admin/index/install 做完之后, 浏览器上输入http://localhost:3000/ 就通过用户名admin 密码adminadmin进行登录,并使用这个系统了。
以下是一个基于 Node.js、Express 和 EJS 模板引擎的分页查询示例: 1. 安装依赖 首先需要安装 Node.js 和 Express,以及 EJS 模板引擎和 body-parser 中间件: ``` npm install express ejs body-parser --save ``` 2. 创建项目 在项目目录下创建 app.js 文件,并添加以下代码: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const ejs = require('ejs'); const app = express(); const port = 3000; // 设置模板引擎 app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); // 解析请求体 app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 据列表 const data = [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 21 }, { id: 3, name: '王五', age: 22 }, { id: 4, name: '赵六', age: 23 }, { id: 5, name: '钱七', age: 24 }, { id: 6, name: '孙八', age: 25 }, ]; // 分页查询 app.get('/list', (req, res) => { // 每页显示的量 const pageSize = 2; // 当前页码 const currentPage = req.query.page || 1; // 计算总页 const totalPage = Math.ceil(data.length / pageSize); // 获取当前页的据 const start = (currentPage - 1) * pageSize; const end = start + pageSize; const list = data.slice(start, end); res.render('list', { list, currentPage, totalPage }); }); // 监听端口 app.listen(port, () => { console.log(`Server is running on ${port}`); }); ``` 3. 创建 EJS 模板 在 views 目录下创建 list.ejs 文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页查询</title> </head> <body> <table> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> <% for(let i = 0; i < list.length; i++) { %> <tr> <td><%= list[i].id %></td> <td><%= list[i].name %></td> <td><%= list[i].age %></td> </tr> <% } %> </table> <div> <% if(currentPage > 1) { %> <a href="/list?page=<%= currentPage - 1 %>">上一页</a> <% } %> <% if(currentPage < totalPage) { %> <a href="/list?page=<%= parseInt(currentPage) + 1 %>">下一页</a> <% } %> </div> </body> </html> ``` 4. 运行项目 在项目目录下执行以下命令启动项目: ``` node app.js ``` 打开浏览器,访问 http://localhost:3000/list 即可看到分页查询的结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值