Question

我有一个手柄视图，这是一个表单集，我试图操作以使用值填充表单的字段，如果用户正在使用我的/edit/:annotation_id路由中的表单。我最初想的就是传递一个对象editMode: req.originalUrl并使用它，因为条件可行，但我没有成功。我很好奇我应采取什么方法才能显示带有填充值的表单，如果它来自/edit/:annotation_id路由，然后是空白表单（如果不是）。有什么建议吗？

路线：

appRoutes.route（＆＃39; /＆＃39;）

.get(function(req, res){

    models.Annotation.findAll({
        where: {
            userId: req.user.user_id
        },
        attributes: ['annotationId', 'name'],
        order: 'annotationDate DESC'
    }).then(function(annotation){
        res.render('pages/high-level-activity-feed.hbs',{
            annotation: annotation,
            user: req.user,
            message: req.flash('Flash is back!')
        });
    })
})

.post(function(req, res){

    models.Annotation.create({

    name: req.body.name,

    }).then(function() { 
        res.redirect('/app');
    }).catch(function(error){
        res.send(error);
    })
});

appRoutes.get（＆＃39; / edit /：annotationId＆＃39;，function（req，res）{

console.log('This is the url path ' + req.originalUrl);

models.Annotation.find({
        where: {
            userId: req.user.user_id,
            annotationId: req.params.annotationId
        },attributes: ['name']
    }).then(function(annotation){
        res.render('partials/edit-modal.hbs',{
            annotation: annotation,
            user: req.user,
            editMode: req.originalUrl
        });
    })
});

注释-form.hbs：

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <h2>Add a new annotation</h2>
        <div class="annotation-form">
            {{#if editMode}}
            <form action="/app/edit/{{annotation.annotationId}}" method="post">
                <div class="annotation-form-header">
                    <img class="user-image" src="http://placehold.it/80x80" alt="Generic placeholder image">
                    <label for="annotation-date">name</label>
                    <input type="date" name="name" id="name" value="{{annotation.name}}">

                </div>
                <button type="submit" id="update-button">Update</button>
            </form>
            {{else}}
            <form action="/app" method="post">
                <div class="annotation-form-header">
                    <img class="user-image" src="http://placehold.it/80x80" alt="Generic placeholder image">
                    <label for="annotation-name">Name</label>
                    <input type="date" name="name" id="name">
                </div>
                <button type="submit" id="create-button">Create</button>
            </form>
            {{/if}}

        </div>
    </div>  
</div>

Answer 1

我不了解车把 - 但您是否尝试过将ejs与快车整合？

整合它只需要做四件事： 1.将以下内容添加到package.json并运行npm install：

"ejs": "^2.3.4",
"express-ejs-layouts": "^2.0.0",

更新您的应用以使用ejs：

var expressLayouts = require('express-ejs-layouts');
app.set('view engine', 'ejs');

您的渲染代码可以保持基本不变 - 但这是一个简化版本：

res.render('pages/test.ejs',{
    editMode:true
});

然后使用ejs语法更新您的view / html页面：

<%if (editMode) { %>
in editMode your html looks like this
<%
}
else{
%>
In non editMode your html looks like this
<%}%>

ExpressJS使用URL作为句柄表达式

1 个答案: