ExpressJS 使用 URL 作为 Handlebars 表达式答案

【问题标题】：ExpressJS Using URL as Handlebars ExpressionExpressJS 使用 URL 作为 Handlebars 表达式
【发布时间】：2015-12-26 15:32:45
【问题描述】：

我有一个把手视图，它是一个表单集，如果用户使用我的/edit/:annotation_id 路由中的表单，我正在尝试操作它以使用值填充表单的字段。我最初认为像传递一个对象 editMode: req.originalUrl 并使用它作为条件会起作用，但我没有成功。我很好奇如果它来自/edit/:annotation_id 路由，我应该采取什么方法只显示具有填充值的表单，如果不是，则显示一个空白表单。有什么建议吗？

路线：

appRoutes.route('/')

.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('/edit/:annotationId', 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
        });
    })
});

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

【问题讨论】：

标签： node.js express handlebars.js

【解决方案1】：

我不了解车把 - 但您尝试过 ejs 与 express 的集成吗？

您只需要做大约四件事来集成它： 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
<%}%>

【讨论】：