Express.js查看“全球”
-
12-10-2019 - |
题
我正在使用express.js(在node.js上),我知道您可以通过“本地”参数呈现自定义数据的视图。 ((res.render("template", { locals: { foo: "bar" } });
)
有什么方法可以拥有“全球”? (即每个视图都可以访问的数据)
我看见 view options
, ,但这不是递归的,因此,如果我在模板上使用任何当地人,它将取代我设置的当地人。
这是我的用例:我想制作,以便可以以每页添加CSS/JS文件,这是我主要布局的一部分。问题是,如果我没有在每个渲染上明确设置这些数组,我会收到一个不确定的错误,因此在模板中,我总是必须执行 typeof css !== "undefined"
舞蹈。此外,我还有其他选择的框选项列表,我不想明确地添加到我的每个表格中。
解决方案
值得注意的是,自Express 3发布以来可能遇到这个问题的人,该方法“ DynameChelpers”不再存在。
取而代之的是,您可以使用app.locals函数,该函数可以用作可以存储值或函数的对象,然后使其可作为视图。例如:-
// In your app.js etc.
app.locals.title = "My App";
app.locals({
version: 3,
somefunction: function() {
return "function result";
}
});
// Then in your templates (shown here using a jade template)
=title
=version
=somefunction()
// Will output
My App
3
function result
如果您需要访问请求对象从中获取信息,则可以编写一个简单的中间软件功能并使用app.settings变量。
例如,如果您使用Connect-Flash向用户提供消息,则可能会执行类似的操作:
app.use(function(req, res, next) {
app.set('error', req.flash('error'));
next();
});
这将使您在模板中使用= settings.error访问错误消息。
这些主题在这里介绍,尽管很简单: http://expressjs.com/api.html#app.locals
更新:Express 4
app.locals
现在是一个简单的JavaScript对象,因此每个属性都必须一个一个一个。
app.locals.version = 3;
app.locals.somefunction = function() {
return "function result";
}
res.locals
提供完全相同的功能,除非应用于特定于请求的数据而不是全应用数据。用户对象或设置是常见的用例。
res.locals.user = req.isAuthenticated() ? req.user : null;
res.locals.userSettings = {
backgroundColor: 'fff'
}
其他提示
有一种方法可以使用动态视图助手使用“全局”变量以供视图。
来自Express.js指南:
app.dynamichelpers(obj)
注册动态视图助手。动态视图助手只是在呈现视图之前接受REQ,RES和对服务器实例进行评估的功能。此函数的返回值成为与之关联的局部变量。
app.dynamichelpers({session:function(req,res){return req.session;}});
现在,所有视图都将有可用的会话,以便可以通过会话访问会话数据。名称等:
您可以在此处找到有关如何使用它们的真实示例: https://github.com/alessioalex/nodetuts/tree/master/express_samples (node app.js启动应用程序)
如作者所述,使用视图选项的真实示例:
var app = express.createServer();
app.configure(function() {
app.set('views', path.join(__dirname, '..', 'views'));
app.set('view engine', 'jade');
app.set('view options', {
assetVersion: 1
});
然后在我的layout.jade(在我的情况下为应用程序的基本模板):
link(rel='stylesheet', href='/static/css/' + assetVersion + '/style.css')
script(src='/static/js/' + assetVersion + '/script.js')
有了这个小技巧,我只需要更新 assetVersion
可变的一个地方,以确保我的资产不会在清漆或其他地方缓存。
我最终研究了源代码,实际上我发现现在可以在Express的版本中使用这种代码。 (到目前为止,仅通过GitHub提供)
实现此目的的最简单方法是创建一个代表您视图的默认当地人集的变量。然后创建一个接受对象,将其与当地人合并并返回合并对象的函数。
我也 将我所有的当地人传递到容器对象中 IE {locals:{g:{prop:val}}}
所以我可以参考 g.prop
只会返回 null
当没有设置时,而不是丢下未定义的错误。
function default_page_vars(custom_vars){
var vars = {
footer: true,
host: req.headers.host.split(':')[0],
config: this.config
};
if(custom_vars){
for(var k in custom_vars){
vars[k] = custom_vars[k];
}
}
return {
g:vars
};
}
//within your handler
response.render(view, {
locals: default_page_vars(other_locals)
});
这是一个被埋葬的回应,但我终于可以工作了。
1)这是模块周围的示例 connect-flash
2)在server.js/app.js中添加一块中间件 req
至 locals
. 。这允许模板调用 request.flash()
每当需要时。没有这个, flash()
在每个请求/重定向击败目的的情况下被消耗。
var app = module.exports = express()
, flash=require('connect-flash');
app.configure(function(){
...
app.use(express.session({ secret: "shhh" }));
// Start Router
app.use(flash());
app.use(function(req, res, next) {
res.locals.request = req;
next();
});
app.use(app.router);
});
3)正常设置您的路线(这是Coffeescript,但没有什么特别的)
app.get '/home', (req, res) ->
req.flash "info", "this"
res.render "#{__dirname}/views/index"
4)呼叫request.flash()当您想要消息时。它们在每个电话上都被消耗掉,所以不要坐下。
!!!
html
head
title= config.appTitle
include partials/_styles
body
include partials/_scripts
#header
a(href="/logout") Logout CURRENTUSER
h2= config.appTitle
#messages
- var flash = request.flash()
each flashType in ['info','warn','error']
if flash[flashType]
p.flash(class=flashType)
= flash[flashType]
block content
h1 content here
Express 4
您可以访问应用程序中呈现的模板中的本地变量。
因此,如果您想在模板中使用任何当地人=>假设您已将模板引擎安装到节点/Express应用程序中。
首先,您需要设置 表达当地人对象 带有您的自定义变量 app.js
文件,如果需要多个值,您可以使用对象(我们在这篇文章中的情况)
/**
* Set locals object
*/
app.locals.layoutData = {
site: {
title: 'MyWebSiteTitle',
},
metaTag: {
charset: 'UTF-8',
description: 'MyDescription',
keywords: 'keyword-1,keyword-2,...',
author: 'MyName',
viewport: 'width=device-width, initial-scale=1.0'
}
};
然后,要访问模板文件中的值 layout.pug
(例如,以哈巴狗的模板引擎为例)
doctype html
html
head
//title
title #{locals.layoutData.site.title}
//Describe metadata
meta(charset=layoutData.metaTag.charset)
meta(name='description', content=locals.layoutData.metaTag.description)
meta(name='keywords', content=locals.layoutData.metaTag.keywords)
meta(name='author', content=locals.layoutData.metaTag.author)
meta(name='viewport', content=locals.layoutData.metaTag.viewport)
body
block content
br
hr
footer
p All rights reserved © 2018 | #{locals.layoutData.site.title}
测试
"dependencies": {
"express": "^4.16.3",
"pug": "^2.0.3"
}