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

Question

I have a list of Teams displayed as a list of links on my page, at the moment, I have a textbox....when the link for that Team is clicked, the Key for that Team is taken and sent to the /team/:key route, it searches for the Team by Key , gets the data and sends the data back. If the data was successfully sent back to the JS file then the Team name is output to the textbox.

I want to change this, when the link is clicked and the data has been retrieved using Team.findByKey I want to render a new page ('teamDetails') and pass it the data for that Team . This way I can make it so that each link for a Team links to the Team's individual page with their full details on it.

Any idea how I would adapt this /team/:key route to do this?

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

Answer 1

Use handlebars templates - http://handlebarsjs.com/

npm install handlebars
npm install hbs

Coffe-script:

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()

In the router:

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

Answer 2

Instead of res.json() , you could use a templating engine which would render the individual team's page. Say you want to use EJS templates:

npm install ejs

Next, create views/team.ejs , which would contain the EJS template for the team. In your route, replace res.json() with a call to the templating engine:

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

EDIT : just read your comment about using Jade templates: the code is very similar, just replace team.ejs with teamDetails.jade .

Also, you probably can remove your client-side code which handles click events on the links, since you don't want to perform an AJAX request anymore.