Node.js / Express – 如何访问JavaScript中的“req”
所以我有一个名为tournament/:key ，它传递给它一个Tournament对象。 正如你可以从下面看到的，Jade模板通过使用例如#{tournemantData.name}访问Tournament的每个variables，这将把Tournament的name打印到页面上。 这组matches实际上是作为一个数组存储在Tournament ，我想通过一个JavaScript文件来访问它们，以便在这个页面上使用它们，因为最终我想要生成一组graphics括号。
我将如何访问JavaScript文件内的这个tournamentData ？
app.get('/tournament/:key', function(req, res) { util.log('Serving request for url [GET] ' + req.route.path); Tournament.findByKey(req.params.key, function(err, tournamentData){ if(!err && tournamentData){ tournamentData = tournamentData; //util.log(tournamentData.teams[0]); res.render('tournamentDetails', { 'tournamentData' : tournamentData, seedsSerialized : JSON.stringify(tournamentData.teams) } ); } else { util.log('Error in fetching Tournament by key : ' + req.params.key); res.json({ 'retStatus' : 'failure', 'msg' : 'Error in fetching Tournament by key ' + req.params.key }); } }); });
玉：
p Name: #{tournamentData.name} p ID: #{tournamentData._id} p Key: #{tournamentData.key} p Teams: #{tournamentData.teams} p Matches: #{tournamentData.matches} p Brackets: div.bracket #tournamentBrackets script(type='text/javascript') var seeds = var rankArray = !{seedsSerialized};
brackets.js
numRounds = Math.log(seeds.length) / Math.log(2); /** * Randomize array element order in-place. * Using Fisher-Yates shuffle algorithm. */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; }; shuffleArray(seeds); var bracketData = { teams : [ // Matchups [ seeds[0].name, seeds[1].name ], [ seeds[2].name, seeds[3].name ] ], results : [[ [ [1, 0], [1, 0] ], [ [1, 0], [1, 0] ] ]] } $(function() { $('#tournamentBrackets').bracket({ init: bracketData }); });
编辑：我已经添加了JavaScript文件，这是做什么是使用jQuery.bracket（我用于生成漂亮的括号中使用的jQuery项目），在这一刻，你可以看到，我已经手动input团队的名称。
在brackets.js的括号数组与tournamentData.matches的括号数组是一样的，但基本的想法是我想从这个JavaScript文件中访问这个信息，以便我可以用这些小组打印括号。
编辑：
$(document).ready(function() { // tournament is now the same as tournmentData in your express route var tournamentText = $(#tournamentData).text(); var tournament = JSON.parse(tournamentText); console.log(tournament, tournament); $(function() { $('#tournamentBrackets').bracket({ init: bracketData }); }); }
您已经可以访问Jade模板中的variables，这意味着您可以通过Javascript在该页面中访问该variables。
基本上你已经有了对tournamentData对象的访问。
你可以做的是获得该tournamentData对象，并使其全球JSvariables或保持在页面范围内。
在你的模板中是这样的
- var matches = tournamentData.matches ; //Specific scope
要么
- window.matches = tournamentData.matches; //Binded to window object global
您可以通过您已经用/tournament/:key显示的路线在Express服务器上发布数据。
就像是 ：
app.get('/tournament-seeds/:key', function(req, res) { Tournament.findByKey(req.params.key, function(err, tournamentData){ res.json({ tournamentData: tournamentData }); }); });
然后 …
在您的brackets.js文件中，您想调用以获取您的种子（？）数据：
因此，将现有代码中的brackets.js中的最后一个函数更改为类似的内容（为简洁起见），应该按照你的要求进行操作：
$(function() { $.get('/tournament-seeds/somerandomkey', function(tournamentData){ seeds = tournamentData.seeds; $('#tournamentBrackets').bracket({ init: bracketData }); }); });
免责声明：我不是说这是做这件事的最好方法，这是我现在能想到的最快的方法！
或者，你可以直接在你的模板中将json转换成一个variables。 请参阅： 将数组传递给JSON对象以进行Jade渲染
- 编辑*如：
在你的路线上：
app.get('/tournament/:key', function(req, res) { util.log('Serving request for url [GET] ' + req.route.path); Tournament.findByKey(req.params.key, function(err, tournamentData){ tournamentData = tournamentData; util.log(tournamentData.teams[0]); res.render('tournamentDetails', { 'tournamentData' : tournamentData, seedsSerialized : JSON.stringify(tournamentData.seeds) } ); }); });
在你的玉模板中：
script(type='text/javascript') var seeds = !{JSON.stringify(tournamentData.teams)};
在你的brakets.js删除你的var种子线。
没有testing，但它应该让你去。
当你说“JavaScript文件”，我假设你的意思是一个客户端JavaScript文件，而不是Express中的服务器端文件。
- 第一种方法是在每个请求上dynamic构build客户端JavaScript文件，并将比赛数据直接添加到脚本中。
- 第二个选项是包含在页面上的锦标赛_id，然后让你的客户端JavaScript执行一个Ajax请求到服务器，以获得余下的锦标赛数据为JSON
- 第三个是将所有有关比赛的数据直接embedded到HTML中，然后在客户端脚本中提取
将锦标赛数据作为JSONstringembedded到templtae中
玉模板
div(style="visibility: hidden")#tournamentData !{JSON.stringify(tournamentData)}
客户端Javascript
现在，在您的客户端JavaScript中，您可以访问#tournamentData div中的文本
$(document).ready(function() { // tournament is now the same as tournmentData in your express route var tournamentText = $(#tournamentData).text() var tournament = JSON.parse(tournamentText) console.log(tournament, tournament) $('#tournamentBrackets').bracket({ init: bracketData }) })