我有一个Teams
列表显示为我页面上的链接列表,此刻,我有一个文本框....当点击Team
的链接时,{ {1}} Key
已被Team
发送到/team/:key
路由,它会Team
搜索Key
,获取数据并将数据发回。如果数据已成功发送回JS文件,则Team
名称将输出到文本框。
我想更改此内容,当点击链接并使用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 :(得分:2)
使用把手模板 - 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
答案 1 :(得分:0)
而不是res.json()
,您可以使用模板引擎来呈现单个团队的页面。假设您要使用EJS模板:
npm install ejs
接下来,创建views/team.ejs
,其中包含团队的EJS模板。在您的路线中,通过调用模板引擎替换res.json()
:
res.render('team.ejs', { 'teamData' : teamData });
编辑:只需阅读有关使用Jade模板的评论:代码非常相似,只需将team.ejs
替换为teamDetails.jade
。
此外,您可能会删除处理链接上的点击事件的客户端代码,因为您不想再执行AJAX请求。