Jade-Bootsrap邮件阅读问题

时间:2015-07-24 15:04:22

标签: javascript node.js twitter-bootstrap email pug

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

我管理访问数据库并在我的页面上显示我的电子邮件,现在我想要做的是当我点击管理界面左侧的按钮时,在自动打开的模式中读取相应的电子邮件。

问题在于,使用以下代码时,只有第一封电子邮件会显示在每个模式中。

// 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

P.S:也许我的问题有点愚蠢,但我刚刚开始一个月前的javascript和两周前的nodejs因此我缺乏经验

提前谢谢。

1 个答案:

答案 0 :(得分:0)

解决了这个问题,这是因为模态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")