Question

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

我在NodeJs网络应用程序中使用快速手柄。我必须在表单中获得用户输入。为了完成这项工作，我们说我在两个不同的视图中有两个单独的表单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>

Answer 1

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

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

将登录表单封装成内联部分：

{{#*inline loginForm}}
<form class="form-horizontal" method="post" action="/login">
    <!-- form contorls -->
    </form>
{{/inline}}

{{#> entry-form}}
  {{> (lookup . 'loginForm')}}
{{/entry-form}}

将表单容器部分定义如下：

<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/')
    ]
}));

Handlebars.js：如何将视图嵌入到局部内部？

1 个答案: