Handlebars.js：部分的にビューを埋め込む方法は？

Question

これは少し混乱するかもしれませんが、私にあなたに問題を教えてください。

NodeJs Webアプリケーションでエクスプレスハンドルバーを使用しています。私はフォームでユーザー入力を取得する必要があります。これを行うには、2つの異なるビューで2つのフォームがあるとしましょう。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 --> 

コンパイル後に次の出力を取得します。 {{変数は}}コンテキストで提供される値によって置換されると仮定すると：

<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

私はこの問題を自分で解決します。そのような問題に遭遇した場合、他の人を助けるためだけに、このソリューションを投稿してください。

私が行ったことは、以下のようにインラインパーシャルを使用しました。

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>

私はビュー/パーシャル/エントリー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/') 
 
    ] 
 
}));

を