访问客户端JavaScript中的Express.js局部变量 [英] Accessing Express.js local variables in client side JavaScript

问题描述

我有一个Jade模板，需要渲染一些从MongoDB数据库，我还需要访问客户端JavaScript文件中的数据。

我使用Express.js并将数据发送到Jade模板如下：

  var myMongoDbObject = {name：'stephen'}; 
 res.render（'home'，{localals：{data：myMongoDbObject}}）; 
  

然后在 home.jade 之内，我可以做以下事情： p>

  p Hello＃{data.name}！ 
  

其中写出：

 你好stephen！ 
  

现在我想要的是也可以访问客户端JS文件中的这个数据对象，所以我可以操纵对象说一个按钮单击，然后再将其发回服务器来更新数据库。

我已经能够通过保存数据对象在Jade模板中的隐藏输入字段内，然后在客户端JS文件中获取该字段的值。

Inside home.jade

   -  local_data = JSON.stringify（data）//从Express.js进入的数据
 input type ='hidden'，value = local_data）#myLocalDataObj 
  

然后在我的客户端JS文件我可以访问local_data，如下所示：

InsideLocalFile.js

 code> var localObj = JSON.parse（$（＃myLocalDataObj）。val（））; 
 console.log（localObj.name）; 
  

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

我的解决方案是最佳的，你们会如何完成这个？

解决方案

p>当渲染完成时，只会将呈现的HTML发送给客户端。因此，任何变量都不再可用。你可以做什么，而不是在输入元素中输入对象，将该对象写成JavaScript：

  script（type = '文/ JavaScript的'）。 
 var local_data =！{JSON.stringify（data）} 
  

编辑：显然玉需要在第一个圆括号后面的一个点。

Curious if I'm doing this right and if not how you guys would approach this.

I have a Jade template that needs to render some data retrieved from a MongoDB database and I also need to have access to that data inside a client side JavaScript file.

I'm using Express.js and sending the data to the Jade template as follows :

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

Then inside of home.jade I can do things like :

p Hello #{data.name}!

Which writes out :

Hello stephen!

Now what I want is to also have access to this data object inside a client side JS file so I can manipulate the Object on say a button click before POSTing it back to the server to update the database.

I've been able to accomplish this by saving the "data" object inside a hidden input field in the Jade template and then fetching the value of that field inside my client-side JS file.

Inside home.jade

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

Then in my client side JS file I can access local_data like so :

Inside myLocalFile.js

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

However this stringify / parsing business feels messy. I know I can bind the values of my data object to DOM objects in my Jade template and then fetch those values using jQuery, but I'd like to have access to the actual Object that is coming back from Express in my client side JS.

Is my solution optimal, how would you guys accomplish this?

解决方案

When rendering is done, only the rendered HTML is send to the client. Therefore no variables will be available anymore. What you could do, is instead of writing the object in the input element output the object as rendered JavaScript:

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

EDIT: Apparently Jade requires a dot after the first closing parenthesis.

这篇关于访问客户端JavaScript中的Express.js局部变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！