0

这可能有点令人困惑，但让我告诉你这个问题。

我在 NodeJs Web 应用程序中使用 express-handlebars。我必须在表单中获取用户输入。为了做到这一点，假设我在两个不同的视图中有两个单独的表单 1. 登录 2. 预订。我想要实现的是以下部分/模板的代码重用：

<div class="row justify-content-sm-center">
<div class="col-sm-auto">                
    <div id="form-panel" class="card" style="margin-top:15%">
        <div id="form-header" class="card-header">
            <div class="card-title">
                <h4>{{ formTitle }}</h4>
            </div>                    
        </div>
        <div id="form-body" class="card-body">
            {{{ formBody }}}
        </div>
    </div>
</div>

谁能指导我如何以如下形式使用上述模板：

{{> entry_form }} <!-- start of the form -->
<form class="form-horizontal" method="post" action="/login">
    <div class="form-group">
        <label for="email_address" class="label">Email Address:</label>
        <input type="email" name="email_address" id="email_address" class="form-control" 
        placeholder="Email Address" autofocus required maxlength="250" value="{{email}}"/>
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" class="form-control" placeholder="Password" 
        required maxlength="250" value="{{password}}"/>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <input type="checkbox" name="remember_me" id="remember_me" checked="{{rememberMe}}"/>
            Remeber me!
        </div>
    </div>
    <div class="form-group text-danger">
        {{ errorMessage }}
    </div>
    <div class="form-group text-center">
        <input type="submit" value="Sign-in" class="btn btn-success"/>
    </div>
</form> <!-- end of the form -->

我想在编译后得到以下输出。假设 {{variables}} 将被上下文中提供的值替换：

<div class="row justify-content-sm-center">
<div class="col-sm-auto">                
    <div id="form-panel" class="card" style="margin-top:15%">
        <div id="form-header" class="card-header">
            <div class="card-title">
                <h4>Sing in</h4>
            </div>                    
        </div>
        <div id="form-body" class="card-body">
            <form class="form-horizontal" method="post" action="/login">
                <div class="form-group">
                    <label for="email_address" class="label">Email Address:</label>
                    <input type="email" name="email_address" id="email_address" class="form-control" 
                    placeholder="Email Address" autofocus required maxlength="250" value=""/>
                </div>
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Password" 
                    required maxlength="250" value=""/>
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <input type="checkbox" name="remember_me" id="remember_me" />
                        Remeber me!
                    </div>
                </div>
                <div class="form-group text-danger">

                </div>
                <div class="form-group text-center">
                    <input type="submit" value="Sign-in" class="btn btn-success"/>
                </div>
            </form>
        </div>
    </div>
</div>

4

1 回答 1

0

我自己解决了这个问题。在这里发布解决方案只是为了在遇到此类问题时帮助其他人。

我所做的是，我使用了以下内联部分。

  1. 将登录表单包含在内联部分中：

{{#*inline loginForm}}
<form class="form-horizontal" method="post" action="/login">
    <!-- form contorls -->
    </form>
{{/inline}}

{{#> entry-form}}
  {{> (lookup . 'loginForm')}}
{{/entry-form}}

  1. 定义表单容器部分如下：

<div class="row justify-content-sm-center">
    <div class="col-sm-auto">                
        <div id="form-panel" class="card" style="margin-top:15%">
            <div id="form-header" class="card-header">
                <div class="card-title">
                    <h4>{{ formTitle }}</h4>
                </div>                    
            </div>
            <div id="form-body" class="card-body">
                {{> (dataform) }}
            </div>
        </div>
    </div>
</div>

请注意，我将表单容器部分保存在 views/partials/entry-from.hbs 文件中，并使用以下方法加载它们：

const express = require('express');

let app = express();

app.engine('hbs', hbs({
    extname:'hbs',
    defaultLayout:'layout',
    layoutsDir:join(__dirname,'views/layouts/'),
    partialsDir: [        
        join(__dirname,'views/partials/')
    ]
}));

于 2017-11-27T17:05:33.710 回答