Jade-Bootstrap 邮件阅读问题

Question

我目前正在编写一个从 mongodb 数据库中提取邮件的 nodejs 管理界面。我正在使用玉模板引擎以及引导程序。

我设法访问数据库并在我的页面上显示我的电子邮件，现在我想做的是当我单击管理界面左侧的按钮时，在自动打开的引导模式中阅读相应的电子邮件。

问题在于，使用以下代码时，every 模态中仅显示第一封电子邮件。

// preset form values if we receive a userdata object //
- user = typeof(udata) != 'undefined' ? udata : { }
// store the userId on the client side in a hidden input field //
input(type='hidden', value= user._id)#userId

div.row
div.col-sm-1
div.col-sm-10
    div.panel.panel-danger
        form( method="post")#account-form.form-horizontal.well.s1pan6
            p.sub2.subheading The forfait types: 0 - Default; 1 - Intermediare
            table.table.table-striped#manage-accounts
                thead
                    tr
                        th Client
                        th Username
                        th Email
                        th Email from
                        th Subject
                        th Date
                        th Content
                tbody
                    each item in users //for(var)
                        tr
                            td(style=" max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;")= item.clientID
                            td Hello
                            td World
                            td= item.from
                            td= item.subject
                            td= item.date
                            td(style=" max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;")= item.text
                            td
                                button(type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="show") Read Mail
                                div(class="modal fade" id="myModal" role="dialog")
                                    div(class="mail")
                                        div(class="modal-dialog modal-lg")
                                            <!-- Modal content-->
                                            <div class="modal-content">
                                            div(class="modal-header")
                                                button(type="button" class="close" data-dismiss="modal")&times;
                                                h4(class="modal-title") Modal Header
                                                div(class="modal-body")
                                                    p= item.text
                                                div(class="modal-footer")
                                                    button(type="button" class="btn btn-default" data-dismiss="modal" id="hide") Close
                                                </div>             



                    tr
                        td(colspan="6")
                        td
                            button(type='submit'  class="btn btn-sm btn-info")<i class="glyphicon glyphicon-upload"></i> Update...
            p.sub2.subheading The forfait types: 0 - Default; 1 - Intermediare
            hr

        // display form errors in a custom modal window //
        include modals/form-errors
div.col-sm-1

邮件内容当然在users.item.text中

Answer 1

解决了这个问题，这是因为所有迭代的模式 id 都是相同的。

我使用了一个变量计数器

- var counter = 0;
                        each item in mails
                            -counter=counter+1;

然后像这样更改模态ID：

button(type="button" class="btn btn-info btn-lg show" data-toggle="modal" data-target="#myModal"+counter) Read Mail
                                    div(class="modal fade" id="myModal"+counter role="dialog")