我正在使用jade创建包含"播放器"的信息的多个模态。我使用的数据对象如下所示:
Player 1
{'fname':'zxy',
'lname':'zzz',
'gpa':2.0,
'favplayer':'foo',
'hobbies':'bar',
'iscurrent':true,
'imgurl':'zxy.jpg'}
Player2
{'fname':'qwe',
'lname':'rty',
'gpa':4.0,
'favplayer':'h4x',
'hobbies':'z0r',
'iscurrent':true,
'imgurl':'qwe.jpg'}
正在输出链接以正确打开两个模态,但是使用来自Player 1的信息填充模态。一个例子就是会列出两个按钮,第一个会说" zxy zzz' s"如果你点击它,它会打开一个包含播放器1信息的模态。第二个按钮会说" qwe rty' s"但是当你点击这个按钮时,它会弹出一个模型填充播放器1中的信息,当我需要它填充播放器2中的信息时。
以下是我在player.jade文件中使用的代码。
extends ../layout
block content
h1 List of Players
br
- for player in players
if player.iscurrent == true
button(type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="##{player.fName}")
|#{player.fname} #{player.lname}'s Profile
br
div(class="modal fade" id="#{player.fName}" tabindex="-1" role="dialog" aria-labelledby="#{player.fName}Label" aria-hidden="true")
div(class="modal-dialog")
div(class="modal-content")
div(class="modal-header")
h4(class="modal-title" id="#{player.fname}Label" style="text-align:center;")
|#{player.fname}
|#{player.lname}'s Player Profile
div(class="modal-body")
|Name: #{player.fname} #{player.lname}
br
|GPA: #{player.gpa}
br
|Hobbies: #{player.hobbies}
br
|Favorite Player: #{player.favplayer}
br
img(src='#{player.imgurl}')
div(class="modal-footer")
button(type="button" class="btn btn-default" data-dismiss="modal")
|Close
很抱歉打扰您,如果我能提供任何其他可能有所帮助的信息,请告诉我。感谢您提前获得任何建议。
编辑一个添加路由的页面视图:
router.route('/currentplayers')
.get(function(req, res, next) {
//retrieve all players from Mongo
mongoose.model('Player').find({}, function (err, players) {
if (err) {
return console.error(err);
} else {
res.format({
html: function(){
res.render('public/currentplayers', {
title: 'Current Players',
"players" : players
});
}
});
}
});
});
编辑2提供使用间距约定而不是制表符编写的代码。
extends ../layout
block content
h1 List of Players
- for player in players
if player.iscurrent == true
button(type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="##{player.fname}")
|#{player.fname}
|'s Profile
br
div(class="modal fade" id="#{player.fname}" tabindex="-1" role="dialog" aria-labelledby="#{player.fname}Label" aria-hidden="true")
div(class="modal-dialog")
div(class="modal-content")
div(class="modal-header")
h4(class="modal-title" id="#{player.fname}Label" style="text-align:center;")
|#{player.fname}
|#{player.lname}'s Player Profile
div(class="modal-body")
|Name:
| 
|#{player.fname} #{player.lname}
br
|GPA: #{player.gpa}
br
|Hobbies: #{player.hobbies}
br
|Favorite Player: #{player.favplayer}
br
img(src='#{player.imgurl}')
div(class="modal-footer")
button(type="button" class="btn btn-default" data-dismiss="modal")
|Close
以上代码正常运行。我可以告诉它和上面的破解代码之间的唯一区别是,使用选项卡按钮缩进我只是按空格键两次缩进每一行。我想切换标签惯例,因为我喜欢更多的空白区域以提供一点额外的可读性。