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 文件中的这个数据对象，这样我就可以在将对象发送回服务器以更新数据库之前，通过单击按钮来操作对象。

我已经能够通过将“数据”对象保存在 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 返回的实际对象。

我的解决方案是最优的，你们将如何做到这一点？

4

5 回答 5

74

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

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

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

于 2012-06-06T18:17:23.870 回答
14

我做的有点不同。在我的控制器中，我这样做：

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

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

var placeUrls = !{place_urls};

在本例中，它用于 twitter bootstrap typeahead 插件。然后，如果需要，您可以使用类似的东西来解析它：

jQuery.parseJSON( placeUrls );

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

于 2012-06-06T18:26:25.020 回答
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 变量，以便该变量从一开始就在全局范围内可用。

服务器端（使用 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'));
于 2013-11-06T13:00:07.917 回答
1

您不需要在渲染调用中传递局部变量，局部变量是全局变量。在您的 pug 文件调用中，不要放置键表达式，例如#{}. 只需使用类似的东西： base(href=base.url)

base.url在哪里app.locals.base = { url:'/' };

于 2016-11-06T09:21:03.177 回答
-1

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

于 2012-06-06T18:17:54.220 回答