从 Express/Node.js Web 应用程序预填充 Pug 表单答案

【问题标题】：Pre-populating Pug form from Express/Node.js web app从 Express/Node.js Web 应用程序预填充 Pug 表单
【发布时间】：2018-04-20 18:51:13
【问题描述】：

我有一个使用 Express 构建的 Node.js Web 应用程序，并在查询 MongoDB 后尝试填充 Jade 模板。我想用这些值填充 Jade 模板。

我不明白的是，为什么即使我注释掉了 collection.find() 函数中的所有内容，并且只有一个 'res.render('editresource')' - 视图也不会被渲染。我不理解一些基本的东西吗？

// From pug file (editresource.pug)
extends layout

block content
    h1 = title

    .main.container
        .row
            .col-md-6.col-md-offset-3
                h1.display-4.m-b-2 Edit Resource

                // register form
                form(method='POST' action='/edit/editresource')
                    div.form-group
                        label(for='name') Name:
                        input#name.form-control(type='text', name='name', required='', value=locals.dName)

// From  Node.js/Express:
    router.get('/editresource/:id', function(req, res) {
    var db = req.db;
    var resource_collection = db.get('resources');

    var resourceId = req.params.id;

    resource_collection.find({'_id' : resourceId},{},function(e,docs){
        // res.render('editresource', {
        //  name : 'asdf'
        // });

        //res.locals.dName = docs[0].name;
        //res.render('editresource')

        res.render('editresource', { 'viewpost' : docs[0].name })

        //res.name = docs[0].name;
        //res.render('editresource', { name : docs[0].name });
    });
// attempting to call res.render('editresource') here does not work??
});

// All of this is fired by this function when a link is clicked
function editResource(event) {
    $.ajax({
        type: 'GET',
        url: '/edit/editresource/' + $(this).attr('rel')
    }).done(function( response ) {

        if (response.msg === '') {
        }
        else
            alert('Error: ' + response.msg);
    });
};

我找到了a similar question，但使用 res.locals 不起作用，发送整个对象也不起作用。

【问题讨论】：

是docs[0].name 值字符串吗？如果是，只需使用viewpost 作为值：value=viewpost in jade
啊，是的。我为该更改编辑了帖子 :) 不幸的是，仍然无法正常工作——尽管我的视图引擎目前是哈巴狗。
渲染 pug 文件时是否有任何错误信息？
没有错误——尽管我仍然很困惑为什么该函数根本不会呈现视图（不导航到新页面）

标签： html node.js mongodb express pug

【解决方案1】：

要使用发送给pug的变量，需要正确使用变量名。

div.form-group
    label(for='name') Name:
    input#name.form-control(type='text', name='name', required='', value=viewpost

【讨论】：

哎呀，小错字——谢谢！不幸的是，这仍然无法正确填充表单。
您是否也正确缩进了代码？它的缩进不正确！
是的！我刚刚从整个文件中取出了一个 sn-p :) 刚刚编辑了我的帖子——注意到即使尝试渲染视图也不起作用
您需要提供更多信息，错误是什么？你为哈巴狗引擎正确使用了路由器吗'app.set('view engine', 'pug');' .您提供的代码 sn-p 似乎是正确的。
是的，视图引擎设置正确。似乎问题在于视图根本没有呈现（如果我注释掉我的 router.get() 函数中的所有内容并且只调用res.render('editresource')，则不会呈现editresource.pug

【解决方案2】：

创建一个对象发送render()方法。

var renderData = { 
    dName = docs[0].name
};

res.render('editresource', renderData)

并将输入的value属性的变量名称更改为dName

input#name.form-control(type='text', name='name', required='', value=dName)

【讨论】：

【解决方案3】：

解决了！参数已正确发送，但在客户端收到响应时我没有注入 html。（例如 $('#wrapper').html(response);)

【讨论】：