模态链接正常工作,但我的模态的内部都包含与创建的第一个模态相同的信息

时间:2015-04-08 11:58:27

标签: twitter-bootstrap pug

我正在使用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:
                  |&nbsp
                  |#{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

以上代码正常运行。我可以告诉它和上面的破解代码之间的唯一区别是,使用选项卡按钮缩进我只是按空格键两次缩进每一行。我想切换标签惯例,因为我喜欢更多的空白区域以提供一点额外的可读性。

0 个答案:

没有答案