Express/Node.js - 使用数据渲染页面

我有一个列表Teams显示为我的页面上的链接列表，此刻，我有一个文本框....当点击该链接的那个Team时， 012 的Key被取出并发送到/team/:key路由，它通过Key搜索Team，获取数据并将数据发送回去。如果数据成功发送回JS文件，那么Team名称将被输出到文本框。Express/Node.js - 使用数据渲染页面

我想改变这种情况，当点击链接并使用Team.findByKey检索到数据时我想渲染一个新页面（'teamDetails'），并将该数据传递给该页面Team。通过这种方式，我可以让Team的每个链接都链接到Team's个人页面，并提供其全部详细信息。

任何想法如何适应这个/team/:key路线来做到这一点？

JS file

// Setup teamsLink to retrieve Team info for whichever Team was clicked 
Team.initTeamsLink = function(){ 
    $("a.teamLink").live("click", function(e){ 
    e.preventDefault(); 
    var teamId = ($(this)[0]).getAttribute('id'); 

    $.get('/team/'+teamId, function(response){ 
     if(response.retStatus === 'success'){ 
     var teamData = response.teamData; 
     $('#teamId').val(teamData.key); 
     $('#teamName').val(teamData.name); 
     } else if(response.retStatus === 'failure'){ 

     } 
    }); 
    }); 
};

Route

app.get('/team/:key', function(req, res) { 
    util.log('Serving request for url [GET] ' + req.route.path); 
    Team.findByKey(req.params.key, function(err, teamData){ 
     if(!err && teamData){ 
     teamData = teamData; 
     res.json({ 
      'retStatus' : 'success', 
      'teamData' : teamData 
     }); 
     } else { 
     util.log('Error in fetching Team by key : ' + req.params.key); 
     res.json({ 
      'retStatus' : 'failure', 
      'msg' : 'Error in fetching Team by key ' + req.params.key 
     }); 
     } 
    }); 
    });

来源

2013-03-07 germainelol

而不是一个JSON响应的，你想有一个HTML的网站？ – Amberlamps 2013-03-07 12:17:48

是的，当此时链接被点击时，JSON响应会发送到页面以将团队名称放入文本框中。相反，我想呈现一个HTML页面（teamDetails.jade是页面），我想在渲染时将团队的详细信息传递给此页面，以便在单击链接时为每个团队创建一个页面。 – germainelol 2013-03-07 12:21:31

相反的res.json()，你可以使用一个模板引擎这将使个人团队的页面。假设你想使用EJS模板：

npm install ejs

接下来，创建views/team.ejs，其中将包括为球队EJS模板。在您的路线，用的模板引擎的调用替换res.json()：

res.render('team.ejs', { 'teamData' : teamData });

编辑：刚刚看了你的评论关于使用玉模板：代码非常相似，只是teamDetails.jade取代team.ejs。

另外，由于您不想再执行AJAX请求，因此您可能会删除处理链接上单击事件的客户端代码。

来源

2013-03-07 12:21:36 robertklep

是的，我已经用'res.render（'teamDetails'）'替换了'res.json（）'代码''但是点击链接时没有任何反应。我添加了一个简单的'util.log（'渲染页面'）来检查它实际上是否已经到达代码的这一点，它是，但是页面没有被渲染。任何想法？关于删除客户端代码，你是什么意思？我仍然需要听取团队链接何时点击确定？ – germainelol 2013-03-07 12:29:42

我只是在这些链接中生成适当的HREF来指向团队页面，但如果这是不可能的（应该是，因为您将团队ID放在'id'属性中），请替换$ .get（）''用'location.href =“/ team /”+ teamId;'。 – robertklep 2013-03-07 12:33:01

有趣的是，我会看看这个，然后，你知道为什么页面不像我说的那样渲染吗？ – germainelol 2013-03-07 12:36:41

使用车把模板 - http://handlebarsjs.com/

npm install handlebars 
npm install hbs

咖啡脚本：

hbs = require 'hbs' 

app.set 'views', __dirname + '/app/views' #folder with your views 
app.set 'view engine', 'hbs' 
app.use express.bodyParser() 
app.use express.methodOverride()

在路由器：

res.render 'index', {title: 'index'} #view name and context

来源

2013-03-07 13:06:05 MrPovod

Express/Node.js - 使用数据渲染页面

回答

相关问题