2013-03-07 66 views
0

我有一個列表Teams顯示爲我的頁面上的鏈接列表,此刻,我有一個文本框....當點擊該鏈接的那個Team時, 012 的Key被取出併發送到/team/:key路由,它通過Key搜索Team,獲取數據並將數據發送回去。如果數據成功發送回JS文件,那麼Team名稱將被輸出到文本框。Express/Node.js - 使用數據渲染頁面

我想改變這種情況,當點擊鏈接並使用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 
     }); 
     } 
    }); 
    }); 
+0

而不是一個JSON響應的,你想有一個HTML的網站? – Amberlamps 2013-03-07 12:17:48

+0

是的,當此時鏈接被點擊時,JSON響應會發送到頁面以將團隊名稱放入文本框中。相反,我想呈現一個HTML頁面(teamDetails.jade是頁面),我想在渲染時將團隊的詳細信息傳遞給此頁面,以便在單擊鏈接時爲每個團隊創建一個頁面。 – germainelol 2013-03-07 12:21:31

回答

0

相反的res.json(),你可以使用一個模板引擎這將使個人團隊的頁面。假設你想使用EJS模板:

npm install ejs 

接下來,創建views/team.ejs,其中將包括爲球隊EJS模板。在您的路線,用的模板引擎的調用替換res.json()

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

編輯:剛剛看了你的評論關於使用玉模板:代碼非常相似,只是teamDetails.jade取代team.ejs

另外,由於您不想再執行AJAX請求,因此您可能會刪除處理鏈接上單擊事件的客戶端代碼。

+0

是的,我已經用'res.render('teamDetails')'替換了'res.json()'代碼''但是點擊鏈接時沒有任何反應。我添加了一個簡單的'util.log('渲染頁面')來檢查它實際上是否已經到達代碼的這一點,它是,但是頁面沒有被渲染。任何想法?關於刪除客戶端代碼,你是什麼意思?我仍然需要聽取團隊鏈接何時點擊確定? – germainelol 2013-03-07 12:29:42

+0

我只是在這些鏈接中生成適當的HREF來指向團隊頁面,但如果這是不可能的(應該是,因爲您將團隊ID放在'id'屬性中),請替換$ .get( )''用'location.href =「/ team /」+ teamId;'。 – robertklep 2013-03-07 12:33:01

+0

有趣的是,我會看看這個,然後,你知道爲什麼頁面不像我說的那樣渲染嗎? – germainelol 2013-03-07 12:36:41

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