首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在客户端JavaScript中访问Express.js局部变量

在客户端JavaScript中访问Express.js局部变量
EN

Stack Overflow用户
提问于 2012-06-07 02:03:50
回答 5查看 64.6K关注 0票数 70

很好奇我做得对不对,如果不对,你们会怎么做。

我有一个Jade模板,它需要呈现从MongoDB数据库检索到的一些数据,而且我还需要访问客户端JavaScript文件中的数据。

我使用Express.js并将数据发送到Jade模板,如下所示:

var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });

然后,在home.jade中,我可以执行以下操作:

p Hello #{data.name}!

它写道:

Hello stephen!

现在,我想要的是还可以访问客户端JS文件中的这个数据对象,这样我就可以在POSTing它返回到服务器以更新数据库之前,通过单击按钮来操作该对象。

通过将"data“对象保存在Jade模板中的一个隐藏输入字段中,然后在我的客户端JS文件中获取该字段的值,我就能够做到这一点。

home.jade内部的

- local_data = JSON.stringify(data) // data coming in from Express.js
input(type='hidden', value=local_data)#myLocalDataObj

然后在我的客户端JS文件中,我可以像这样访问local_data:

myLocalFile.js内部的

var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);

然而,这种stringify / parsing业务让人感觉很混乱。我知道我可以将数据对象的值绑定到Jade模板中的DOM对象,然后使用jQuery获取这些值,但我希望能够在客户端JS中访问从Express返回的实际对象。

我的解决方案是最优的吗,你们该如何实现呢?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-06-07 02:17:24

渲染完成后,只将渲染的HTML发送到客户端。因此,变量将不再可用。您可以做的不是在输入元素中写入对象,而是将对象输出为呈现的JavaScript:

script(type='text/javascript').
    var local_data =!{JSON.stringify(data)}

编辑:显然Jade需要在第一个结束括号后加上一个点。

票数 73
EN

Stack Overflow用户

发布于 2012-06-07 02:26:25

我做这件事的方式有点不同。在我的contoller中,我这样做:

res.render('search-directory', {
  title: 'My Title',
  place_urls: JSON.stringify(placeUrls),
});

然后在我的jade文件的javascript中,我像这样使用它:

var placeUrls = !{place_urls};

在本例中,它用于twitter bootstrap typeahead插件。然后,如果需要,您可以使用类似以下内容来解析它:

jQuery.parseJSON( placeUrls );

另请注意,您可以省略本地变量:{}。

票数 14
EN

Stack Overflow用户

发布于 2013-11-06 21:00:08

使用Jade模板:

如果要在包含的静态HTML文件上方插入@Amberlamps代码片段,请记住在views/index.jade中在顶部指定!5,以避免破坏样式

!!! 5
script(type='text/javascript')
    var local_data =!{JSON.stringify(data)}

include ../www/index.html

这将在实际的静态HTML页面加载之前传入local_data变量,因此该变量从一开始就是全局可用的。

服务器端(使用Jade模板引擎)- server.js

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'));
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10919650

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档