CODEWITHSUNDEEP
javascriptnode.jsexpress
germainelol
germainelol

Reputation: 3331

Express / Node.js - Render page with data

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

Upvotes: 0

Views: 17930

Answers (2)

MrPovod
MrPovod

Reputation: 193

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

Upvotes: 2

robertklep
robertklep

Reputation: 203304

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.

Upvotes: 0

Related Questions