Express / Node.js - 使用数据呈现页面

时间:2013-03-07 12:11:16

标签: javascript node.js express

我有一个Teams列表显示为我页面上的链接列表,此刻,我有一个文本框....当点击Team的链接时,{ {1}} Key已被Team发送到/team/:key路由,它会Team搜索Key,获取数据并将数据发回。如果数据已成功发送回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
        });
      }
    });
  });

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

而不是res.json(),您可以使用模板引擎来呈现单个团队的页面。假设您要使用EJS模板:

npm install ejs

接下来,创建views/team.ejs,其中包含团队的EJS模板。在您的路线中,通过调用模板引擎替换res.json()

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

编辑:只需阅读有关使用Jade模板的评论:代码非常相似,只需将team.ejs替换为teamDetails.jade

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