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

我已经能够通过在Jade模板中的隐藏输入字段中保存“data”对象，然后在客户端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才会发送到客户端。因此，不再有可用的变量。你可以做的是，不是在input元素中写入对象而是将对象输出为呈现的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 );

另请注意，您可以省略本地人：{}。

Answer 3

使用Jade模板：

如果要在包含的静态HTML文件上方插入@Amberlamps代码段，请记住指定 !!! 5 在顶部，以避免你的造型被打破，在 views / index.jade ：

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

include ../www/index.html

这将在加载实际静态HTML页面之前传入local_data变量，以便该变量从一开始就全局可用。

Serverside（使用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'));

Answer 4

您不需要在render调用中传递locals变量，locals变量是globals。在您的哈巴狗文件调用中，不要放置键表达式，例如#{}。只需使用以下内容： base(href=base.url)

其中base.url为app.locals.base = { url:'/' };

Answer 5

你听说过socket.io吗？（http://socket.io/）。从express访问对象的一种简单方法是在node.js和你的javascript之间打开一个套接字。这样，数据可以轻松传递到客户端，然后使用javascript轻松操作。代码不必太多，只需来自node.js的socket.emit()和来自客户端的socket.on()。我认为这是一个有效的解决方案！

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

5 个答案: