HTML 表单未在 Handlebars 视图中显示正确的数据

Question

我在使用 sequelize 和 postgresql（由 brad traversy 提供）创建一个快速应用程序时第一次使用 handlebars。填写表格后，我使用 Joi 来验证请求 body ，如果有错误我 re-render 表格（视图）保留最初输入的值。问题是当发生这种情况时，文本会被自动修剪。

我用“Hello World”填写标题字段并且不填写表单中的其他字段，Joi 会不高兴所以我 re-render 表单（视图）并且当标题在表单中重新填充时，它只会说“你好”。

Post Gig 资源端点

// Add a Gig
router.post("/add", (req, res) => {
    let { title, technologies, budget, description, contact_email } = req.body;

    const { error } = validateGig(req.body);

    if (error) {
        // Re-Render The Form
        return res.status(400).render("add", {
            error: error.details[0].message,
            title,
            technologies,
            budget,
            description,
            contact_email
        });
    } else {
        budget == "" ? (budget = "Unknown") : (budget = `$${budget}`);

        // Make Lower Case and Remove Space After Comma
        technologies = technologies.toLowerCase().replace(/, /g, ",");

        // Insert Into Table
        Gig.create({
            title,
            technologies,
            budget,
            description,
            contact_email
        })
            .then((gig) => res.redirect("/gigs"))
            .catch((err) => console.log("Error Adding Gig" + err));
    }
});

把手视图

<section id="add" class="container">
    <div class="form-wrap">
        <h1>Add A Gig</h1>
        <p>Your contact email will be shared with registered users to apply to your gig</p>
        {{#if error}}
        <div class="error">
            <p>{{error}}</p>
        </div>
        {{/if}}
        <form action="/gigs/add" method="POST">
            <div class="input-group">
                <label for="title">Gig Title</label>
                <input type="text" name="title" id="title" class="input-box"
                    placeholder="eg. Small Wordpress website, React developer" maxlength="100" value={{title}}>
            </div>
            <div class="input-group">
                <label for="technologies">Technologies Needed</label>
                <input type="text" name="technologies" id="technologies" class="input-box"
                    placeholder="eg. javascript, react, PHP" maxlength="100" value={{technologies}}>
            </div>
            <div class="input-group">
                <label for="budget">Budget (Leave blank for unknown)</label>
                <input type="number" name="budget" id="budget" class="input-box" placeholder="eg. 500, 5000, 10000"
                    value={{budget}}>
            </div>
            <div class="input-group">
                <label for="description">Gig Description</label>
                <textarea name="description" id="description" class="input-box"
                    placeholder="Describe the details of the gig" rows="10">{{description}}</textarea>
            </div>
            <div class="input-group">
                <label for="budget">Contact Email</label>
                <input type="email" name="contact_email" id="contactemail" class="input-box"
                    placeholder="Enter an email" value={{contact_email}}>
            </div>
            <input type="submit" value="Add Gig" class="btn btn-reverse">
        </form>
    </div>
</section>

Answer 1

在模板中使用变量时，您仍需要在属性值两边加上引号。

例如：

value={{title}}

应该写成

value="{{title}}"

HTML 表单未在 Handlebars 视图中显示正确的数据

HTML Form Not Displaying Correct Data in Handlebars View

html

javascript

css

handlebars.js

joi