如何基于JSON动态HTML？(How to generate dynamic html based

我在执行服务器端渲染页面，对于服务器端渲染我使用的HTML，Node.js的车把。因此，从客户端我送静态HTML，JSON数据。车把将绑定静态页面（在节点侧）的数据。而在响应我得到的HTML页面数据。

结构下面的代码：

module.exports.renderTemplate = function (templateData, htmlSource) {
  // I am getting dynamicElement JSON
  // generate HTML dynamic element?
  // How to add with final HTML.
  template = Handlebars.compile(htmlSource);      
  html     = template(templateData);     
  return(html)
}

上面的代码给了我最终的HTML，下面我附上的console.log代码。

htmlSource

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{staticElement.title}}</title>
  <link rel="stylesheet" href="../../_global/xlib/bootstrap/css/bootstrap.min.css">
</head>
<body>
  <header>
    <div>
      <a href="javascript:;" class="hamburger-icon"></a>
      <h2 class="page-title">{{staticElement.title}}</h2>
    </div>  
  </header>
  <main>
    <section class="card-container container-component">
      <div class="card">      
        <h2>{{staticElement.text1}}</h2>       
      </div>
      <div class="card">
        <i class="icons import-enrollment-icon"></i>
        <h2>{{staticElement.text2}}</h2>

      </div>
    </section>
  </main>
  <script src="../../_global/xlib/jquery/jquery.min.js"></script>  
  <script src="../../../scripts/utils.js"></script>
  <script src="../../_global/scripts/utils.js"></script>
  <script src="home.js"></script>
</body>
</html>

templateData

   { staticElement:
       { title: 'JHON',
         text1: 'Ameo',            
         text2: 'Start'        
    },
    {dynamicElement:
                 {"myBooks": [{
                               "Book ID": "1",
                               "Book Name": "Computer Architecture",
                               "Category": "Computers"                
                               },
                               {
                               "Book ID": "2",
                               "Book Name": "Asp.Net 4 Blue Book",
                               "Category": "Programming"             
                                }        
                              ] 
                    }
      }

最终的HTML：

<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>{{staticElement.title}}</title>
      <link rel="stylesheet" href="../../_global/xlib/bootstrap/css/bootstrap.min.css">
    </head>
    <body>
      <header>
        <div>
          <a href="javascript:;" class="hamburger-icon"></a>
          <h2 class="page-title">JHON</h2>
        </div>  
      </header>
      <main>
        <section class="card-container container-component">
          <div class="card">      
            <h2>Ameo</h2>       
          </div>
          <div class="card">           
            <h2>Start</h2>

          </div>
        </section>
      </main>
      <script src="../../_global/xlib/jquery/jquery.min.js"></script>  
      <script src="../../../scripts/utils.js"></script>
      <script src="../../_global/scripts/utils.js"></script>
      <script src="home.js"></script>
    </body>
    </html>

当我要创建文件撰写。然后，它不能正常工作。因为文件撰写将与浏览器。我想dynamicElement JSON数据添加到最终的HTML没有硬编码的HTML标签，手段在未来5年或10 JSON值会在dynamicElement则没有必要写html标记。

我在车把和节点端呈现新的。提前致谢。