在客户端JavaScript中访问Express.js局部变量
我很好奇我是否做得对,如果不是,你们会怎么做 我有一个Jade模板,需要呈现从MongoDB数据库检索到的一些数据,我还需要访问客户端JavaScript文件中的数据 我正在使用Express.js并将数据发送到Jade模板,如下所示:在客户端JavaScript中访问Express.js局部变量,javascript,node.js,express,pug,Javascript,Node.js,Express,Pug,我很好奇我是否做得对,如果不是,你们会怎么做 我有一个Jade模板,需要呈现从MongoDB数据库检索到的一些数据,我还需要访问客户端JavaScript文件中的数据 我正在使用Express.js并将数据发送到Jade模板,如下所示: var myMongoDbObject = {name : 'stephen'}; res.render('home', { locals: { data : myMongoDbObject } }); 然后在家里。jade我可以做以下事情: p Hello
var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });
然后在家里。jade我可以做以下事情:
p Hello #{data.name}!
其中写道:
Hello stephen!
现在,我想要的是在客户端JS文件中访问这个数据对象,这样我就可以在将对象发回服务器以更新数据库之前,通过点击按钮来操作该对象
我已经能够通过将“数据”对象保存在Jade模板中的一个隐藏输入字段中,然后在客户端JS文件中获取该字段的值来实现这一点
在家里。翡翠
- local_data = JSON.stringify(data) // data coming in from Express.js
input(type='hidden', value=local_data)#myLocalDataObj
然后在客户端JS文件中,我可以访问本地_数据,如下所示:
在myLocalFile.js内部
var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);
然而,这种字符串化/解析业务感觉很混乱。我知道我可以将数据对象的值绑定到Jade模板中的DOM对象,然后使用jQuery获取这些值,但我希望能够访问从客户端JS中的Express返回的实际对象
我的解决方案是否最优,你们将如何实现这一点?渲染完成后,只向客户端发送渲染的HTML。因此,变量将不再可用。您可以做的是,不必在输入元素中写入对象,而是将对象作为呈现的JavaScript输出:
script(type='text/javascript').
var local_data =!{JSON.stringify(data)}
编辑:显然,Jade在第一个右括号后需要一个点。你听说过socket.io吗?(http://socket.io/).
从express访问对象的一种简单方法是打开node.js和javascript之间的套接字。通过这种方式,数据可以轻松地传递到客户端,然后使用javascript轻松地进行操作。代码不需要太多,只需要node.js中的
socket.emit()
和客户端的socket.on()
。我认为这是一个有效的解决办法 我的做法有点不同。在我的控制器中,我执行以下操作:
res.render('search-directory', {
title: 'My Title',
place_urls: JSON.stringify(placeUrls),
});
然后在jade文件中的javascript中,我使用它如下:
var placeUrls = !{place_urls};
在本例中,它用于twitter引导typeahead插件。然后,如果需要,您可以使用类似这样的方法对其进行解析:
jQuery.parseJSON( placeUrls );
还请注意,您可以省略局部变量:{}。使用Jade模板:
如果要在包含的静态HTML文件上方插入@Amberlamps代码片段,请记住指定!!!5在顶部,为避免破坏您的造型,
在视图/索引中,jade:
!!! 5
script(type='text/javascript')
var local_data =!{JSON.stringify(data)}
include ../www/index.html
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.get('/', ensureAuthenticated, function(request, response){
response.render('index', { data: {currentUser: request.user.id} });
});
app.use(express.static(__dirname + '/www'));
这将在实际静态HTML页面加载之前传入本地_数据变量,以便该变量从一开始就全局可用
服务器端(使用Jade模板引擎)server.js:
!!! 5
script(type='text/javascript')
var local_data =!{JSON.stringify(data)}
include ../www/index.html
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.get('/', ensureAuthenticated, function(request, response){
response.render('index', { data: {currentUser: request.user.id} });
});
app.use(express.static(__dirname + '/www'));
您不需要在render调用中传递局部变量,局部变量是全局变量。在您的pug文件调用中,不要放置键表达式,例如
{}
。只需使用以下内容:
base(href=base.url)
其中
base.url
是app.locals.base={url:'/'}代码>我仍然看到脚本标记中的“数据”未定义。好的,这比我的输入字段解决方案要好,因为它不需要将JSON字符串解析回一个对象,也不需要使用jQuery查找输入字段的值。这对我不起作用,我得到了[object object]。我可能在服务器端使用stringify或parse时出错了吗?@Costa根据您的视图引擎,您可能无法从视图中调用JSON.stringify。相反,您应该在控制器中对其进行字符串化,并将字符串作为变量传递,如{{{{{jsonData}}}
(如果是把手)。建议的解决方案有效,我还建议使用一种更干净、更集成的方式来公开服务器端变量。这就是使用锤子敲打蜜蜂。它几乎不需要任何东西就增加了很多请求。确切地说,在这种情况下,Socket.io是一种过分的做法。我正在寻找最简单的方法将JS变量从服务器传输到客户端脚本。哈哈,我有点喜欢Alex的建议,砰!啊,所有那些讨厌的当地人砰砰+1关于忽略本地人,我不知道你能做到。忽略本地人是什么意思@braitsch@iamrudra没有必要在render函数中的locals对象前面加上单词“locals”res.render('home',{data:myObject}}})
与res.render('home',{locals:{data:myObject}}})
相比很好,尽管为了清晰起见,我可能建议你还是这样做。@braitsch:这对我来说是新事物。我在学校做过node和express项目,但从未使用过locals对象。你能给我指出正确的文档/阅读材料吗?我实际上在几个月前创建了一个npm包来解决这个问题: