使用 EJS 将数据从 MongoDB 传递到 Bootstrap 模式

Question

我正在构建一个快速应用程序，其中包含用于呈现视图的ejs and bootstrap、用于服务器端的node and express 和用于存储的mongodb。

我有一个表格(contained in a modal)，我可以在其中发布数据。提交表单后，将值保存到mongodb。

这是用于编辑的 sn-p：

<td><%= cats.image %></td>
<td><a type="button" data-toggle="modal" data-target="#editCategory" href="#">Edit</a>

// without using the modal above, I'll have to create a new page to edit only one item
// I think it's a waste of page space and bad UX, so I am going with the modal

<!--<a href="/admin/categories/edit-category/<%= cats._id %>">--> // I want to get the values from this id and show in the modal
<!--<button type="button" class="btn btn-primary btn-sm">Edit</button>-->
<!--</a>-->
</td>

当我单击编辑按钮时，我想获取项目的 id 并检索它的值以显示在模式中。

这是完整的模态视图：

<!-- Edit Category Modal -->
    <div class="modal fade" id="editCategory" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="/admin/categories/edit-cateory/<%=  %>" method="post" enctype="multipart/form-data">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                        <h4 class="modal-title" id="myEditCategoryLabel">Edit Category</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">

                            <label>Title</label>
                            // this value should come from the category id but don't know how to pass it
                            <input value="<%= %>" name="title" class="form-control" type="text" placeholder="Category Title"> <br>

                            <label>Upload Image</label>
                            <input class="form-control selImg" type="file" accept="image/*" onchange="showImage.call(this)">
                            <img src="#" class="imgPreview" style="display: none; height: 100px; width: 100px">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Edits</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

如何使用 ejs 将数据从 mongodb 传递到模态？ 任何帮助将不胜感激。

Answer 1

将您的 ID 存储在某处：隐藏的输入或数据属性。

<tr data-id="<%= cats.id %>">
    <td><%= cats.image %></td>
    <td>
        <a type="button" class="edit" href="#">Edit</a>
    </td>
</tr>

然后，创建一个onclick 事件处理程序，以便在单击按钮时， 收到响应后，它将通过 AJAX 和 open the modal dynamically 获取额外的数据。

$('a.edit').click(function (e) {
    e.preventDefault();
    var tr = $(this).closest('tr'),
        modal = $('#editCategory');
    // make AJAX call passing the ID
    $.getJSON('/admin/categories/get-cateory/' + tr.data('id'), function (data) {
        // set values in modal
        modal.find('form').attr('action', '/admin/categories/get-cateory/' + tr.data('id') );
        modal.find('[name=title]').val( data.title );
        // open modal
        modal.modal('show');
    });
});

您将需要创建一个用于获取单个对象的路由（我将把它留给您）

app.get('/admin/categories/get-cateory/:id', function (req, res) {

    // TODO: fetch data using passed ID

    // once you have the data, simply send the JSON back
    res.json(data);
});