Tra*_*Guy 6 javascript ejs node.js express
我正在使用Express和EJS来提供页面.我正在使用Bootstrap作为UI,特别是导航栏.
我想'active'
在当前页面的<li>
项目中添加一个类,以显示当前页面.但是,我无法找到如何从呈现页面的EJS代码中获取URL.
我找到了2个解决方法:我使用包括将页面名称作为路由中的参数传递res.render('myview', {pageName: 'myView'});
- 这是不可扩展的,可能会导致问题.
另一种方法是在客户端使用jQuery 'active'
在页面准备好时将类添加到项目中 - 但这意味着在每个视图中包含这段脚本+一些无用的客户端循环.
之前使用过多种服务器端渲染语言,我觉得我错过了一些东西.在线EJS文档并不是那么好.
有没有办法从EJS代码中找到我当前的路径/ url?
更新: 我获取了前2个建议,并将视图名称作为参数传递给视图.我真的很喜欢@tandrewnichols的想法来自动计算它,但最终,复制粘贴字符串更容易:)
hex*_*ide 19
据我所知,除非你在内部修改EJS,否则你不能做你想要的.但是,一个不太麻烦的解决方案是在每次页面调用时传递请求的URL属性,而不是按路由定义它.
app.get('/url', function (req, res) {
res.render('view', {
page: req.url,
nav: {
'Page 1': '/page1',
'Page 2': '/page2',
'Page 3': '/page3'
}
});
});
Run Code Online (Sandbox Code Playgroud)
如果你只是想获得的URL的第一部分和与之相匹配的,那么你可以只调用split('/')
上req.url
.然后,您可以在模板文件中放置一个循环,以创建导航栏的列表.
<% nav.forEach(function(title) { %>
<% if (nav[title] == page) { %>
<li class="active">This part of the navigation bar is active.</li>
<% } else { %>
<li>This part of the navigation bar is normal.</li>
<% } %>
<% }) %>
Run Code Online (Sandbox Code Playgroud)
在我使用过的几乎所有节点/表达模板语言(ejs、kiwi、swig、jade)中,答案是否定的。我总是只是设置一个名为“active”的变量,然后检查它。正如您所说,这不是一个很好的答案,尽管我不知道可扩展性是问题所在。如果每个 url 都渲染它自己的视图(或者即使您有一个用于视图渲染的通用处理程序),那么说req.active = "Somepage"
. 另一种可能性是添加根据路线为您完成此操作的中间件。就像是
app.use(function(req, res, next){
req.active = req.path.split('/')[1] // [0] will be empty since routes start with '/'
next();
});
Run Code Online (Sandbox Code Playgroud)
然后,您只需确保具有相应导航组件的任何路线都使用唯一路径,例如
app.get('/students', ....)
app.get('/classes', ....)
app.get('/teachers', ....)
// etc.
Run Code Online (Sandbox Code Playgroud)
编辑:为了回应您的评论,我总是将所有视图内容放入内部的一个对象键中req
,并且通常我通过我使用的任何模板器来命名该键。所以我可能实际上会使用上面的示例来设置req.ejs.active
然后执行
res.render('myview', req.ejs);
Run Code Online (Sandbox Code Playgroud)
这种方法使得将逻辑分离到多个中间件函数中变得更加容易,并且不必将巨大的匿名对象传递给 res.render。
归档时间: |
|
查看次数: |
14196 次 |
最近记录: |