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

Question

好奇,如果我这样做,如果不是你们怎么会这样做.

我有一个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文件中的这个数据对象,这样我就可以在按下按钮之前操作对象,然后再将其发回服务器以更新数据库.

我已经能够通过将"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);

然而,这个字符串化/解析业务感觉很乱.我知道我可以将我的数据对象的值绑定到我的Jade模板中的DOM对象,然后使用jQuery获取这些值,但是我想要访问从客户端JS中的Express返回的实际Object.

我的解决方案是否是最佳的,您将如何实现这一目标？

Answer 1

渲染完成后,只有呈现的HTML才会发送到客户端.因此,不再有可用的变量.你能做什么,而不是在输入元素中写入对象输出对象作为呈现的JavaScript:

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

编辑:显然Jade在第一个右括号后需要一个点.

Answer 2

我做的有点不同.在我的控制器中,我这样做:

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

然后在我的jade文件中的javascript中我使用它如下:

var placeUrls = !{place_urls};

在这个例子中,它用于twitter bootstrap typeahead插件.如果需要,您可以使用这样的东西来解析它:

jQuery.parseJSON( placeUrls );

另请注意,您可以省略本地人:{}.