Question

所以我有一个名为tournament/:key的加载页面，它传递给Tournament个对象。正如您从下面可以看到的，Jade模板正在使用Tournament来访问#{tournemantData.name}中的每个变量，例如Tournament会将name的{{1}}打印到页面。 matches的集合实际上存储为Tournament中的数组，我想通过JavaScript文件访问它们，以便在此页面上使用它们，因为最终我想要一组要制作的图形括号。

如何在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项目），此刻你可以看到我手动输入的名字团队。

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
    });
  });
}

Answer 1

您已经可以访问Jade模板中的变量，这意味着您可以通过Javascript在该页面中访问该变量。

基本上你已经可以访问tournamentData对象了。

你可以做的是获取tournamentData对象并使其成为全局JS变量或将其保留在页面范围内。

模板中有类似内容

- var matches = tournamentData.matches ;  //Specific scope

或者

- window.matches = tournamentData.matches; //Binded to window object global

Answer 2

您可以通过您已使用/tournament/:key展示的路线在Express服务器上发布数据。

类似的东西：

 app.get('/tournament-seeds/:key', function(req, res) {
    Tournament.findByKey(req.params.key, function(err, tournamentData){
      res.json({ tournamentData: tournamentData });
    });
  });

然后......

在您的bracket.js文件中，您想要调用以获取种子（？）数据：

因此，将现有代码中的bracket.js中的最后一个函数更改为此类（为简洁而剪切）应该可以执行您想要的操作：

$(function() {   $.get('/tournament-seeds/somerandomkey', function(tournamentData){
   seeds = tournamentData.seeds;

    $('#tournamentBrackets').bracket({
        init: bracketData
    });   
  }); 
});

免责声明：我不是说这是最好的方法，这是我现在能想到的最快的方式！

或者你可以直接在模板中将json变成一个变量。看到： Passing an array to a JSON object for Jade rendering

编辑* 喜欢：

在您的路线上：

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 seed lines。

未经测试，但它应该让你去。

Answer 3

当您说＆＃34; JavaScript文件＆＃34;我假设您的意思是客户端javascript文件而不是Express中的服务器端文件。

第一种方法是在每个请求上动态构建客户端javascript文件，并将锦标赛数据直接添加到脚本中。
第二个选项是在页面上包含锦标赛_id，然后让你的客户端javascript向服务器执行ajax请求，以获得json的剩余锦标赛数据
第三种是将有关锦标赛的所有数据直接嵌入到html中，然后在客户端脚本中提取

将锦标赛数据作为JSON字符串嵌入到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
   })
})

Node.js / Express - 如何在JavaScript中访问“req”

3 个答案:

玉模板

客户端Javascript