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

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

• javascript
• node.js
• express

• Instead of a JSON response, you want a HTML site? – Amberlamps Commented Mar 7, 2013 at 12:17
• Yes, when the link is clicked at the moment, a JSON response is sent to the page in order to put the Team's name into a textbox. Instead I want to render a HTML page I have (teamDetails.jade is the page), I want to pass the Team's details to this page when rendering so that I can create a page for each team when the links are clicked. – germainelol Commented Mar 7, 2013 at 12:21

2 Answers 2

Use handlebars templates - http://handlebarsjs./

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

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 ment 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.