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

【问题标题】：Express / Node.js - Render page with dataExpress / Node.js - 使用数据渲染页面
【发布时间】：2013-03-07 21:06:05
【问题描述】：

我有一个Teams 列表显示为我的页面上的链接列表，目前，我有一个文本框....当单击该Team 的链接时，该Key取Team 并发送到/team/:key 路由，它通过Key 搜索Team，获取数据并将数据发回。如果数据成功发送回 JS 文件，则 Team 名称将输出到文本框。

我想更改这一点，当单击链接并使用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
        });
      }
    });
  });

【问题讨论】：

您想要一个 HTML 网站而不是 JSON 响应？
是的，当点击链接时，会向页面发送 JSON 响应，以便将团队名称放入文本框中。相反，我想渲染一个我拥有的 HTML 页面（teamDetails.jade 是页面），我想在渲染时将团队的详细信息传递给该页面，以便在单击链接时为每个团队创建一个页面。

标签： javascript node.js express

【解决方案1】：

使用车把模板 - 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

【讨论】：

【解决方案2】：

代替res.json()，您可以使用模板引擎来呈现各个团队的页面。假设你想使用EJS 模板：

npm install ejs

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

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

编辑：请阅读您关于使用 Jade 模板的评论：代码非常相似，只需将 team.ejs 替换为 teamDetails.jade。

此外，您可能可以删除处理链接点击事件的客户端代码，因为您不想再执行 AJAX 请求。

【讨论】：

是的，我已将res.json() 代码替换为res.render('teamDetails');，但单击链接时没有任何反应。我添加了一个简单的小util.log('rendering page') 来检查它实际上是否到达了代码的这一点，但页面没有被呈现。任何想法？删除客户端代码是什么意思？当团队链接确实被点击时，我还需要听吗？
我只会在这些链接中生成正确的 HREF 以指向团队页面，但如果这不可能（应该可以，因为您将团队 ID 放在 id 属性中） , 将$.get() 替换为location.href = "/team/" + teamId;。
有趣，我也看看这个，你知道为什么页面没有像我说的那样呈现吗？
您正在尝试对现在生成 HTML 的路由执行 AJAX 请求（使用 $.get()），而您的客户端代码仍假定 JSON 响应。
@LV98 带把手，您可以使用{{{output}}} 到prevent HTML escaping。我同意更详细地检查 React 是值得的：D