1

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

我将如何tournamentData在 JavaScript 文件中访问它？

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

括号.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
    });
  });
}
4

3 回答 3

1

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

基本上你已经可以访问锦标赛数据对象了。

您可以做的是获取该锦标赛数据对象并将其设为全局 JS 变量或将其保留在页面范围内。

在你的模板中有这样的东西

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

或者

- window.matches = tournamentData.matches; //Binded to window object global
于 2013-04-10T12:56:00.393 回答
1

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

就像是 ：

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

然后 ...

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

因此，将现有代码中括号.js 中的最后一个函数更改为这样的内容（为简洁起见）应该可以满足您的要求：

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

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

免责声明：我并不是说这是最好的方法，这是我目前能想到的最快的方法！

或者，您可以将 json 直接放入模板中的变量中。请参阅： 将数组传递给 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 种子行。

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

于 2013-04-10T14:12:53.663 回答
0

当您说“JavaScript 文件”时，我假设您指的是客户端 JavaScript 文件，而不是 Express 中的服务器端文件。

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

将您的锦标赛数据作为 JSON 字符串嵌入模板中

玉模板

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
   })
})
于 2013-04-10T12:55:05.913 回答