Express/Node.js - 使用數據渲染頁面

我有一個列表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 
     }); 
     } 
    }); 
    });

來源

2013-03-07 germainelol

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

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

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

npm install ejs

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

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

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

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

來源

2013-03-07 12:21:36 robertklep

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

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

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

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

來源

2013-03-07 13:06:05 MrPovod

Express/Node.js - 使用數據渲染頁面

回答

相關問題