JavaScript HTML Handlebars Template

Posted 2020-10-04 zengjf

/*********************************************************************
 *             javascript html Handlebars Template
 * 说明：
 *     最近在折腾php发现JavaScript能处理的事情远不止自己目前处理的事情，
 * 发现有JavaScript HTML框架，这样在GitHub上配合JSON作为配置，就可以自由
 * 组合静态网站了。
 *
 *                                   2017-8-24 深圳 龙华樟坑村 曾剑锋
 ********************************************************************/

一、参考文档：
    1. Top 10 Templating Engines for JavaScript To Improve and Simplify Your Workflow 2017
        https://colorlib.com/wp/top-templating-engines-for-javascript/
    2. Handlebars 
        http://handlebarsjs.com/
    3. Handlebars Getting Started
        http://handlebarsjs.com/
    
二、大致使用方法：
    1. 变量占位符： {{ 变量名 }} 
        <div class="entry">
          <h1>{{title}}</h1>
          <div class="body">
            {{body}}
          </div>
        </div>
    2. 将template放在<script>标签中，感觉在页面第一次渲染的时候是不错的方法：
        <script id="entry-template" type="text/x-handlebars-template">
          <div class="entry">
            <h1>{{title}}</h1>
            <div class="body">
              {{body}}
            </div>
          </div>
        </script>
    3. 编译template：
        var source   = $("#entry-template").html();
        var template = Handlebars.compile(source);
        $(body).html(html);
    4. HTML转义字符：
        使用{{}}会将HTML中的转义字符进行替换，使用{{{}}}就可以避免；
    5. template注释：
        <div class="entry">
          {{!-- only output author name if an author exists --}}
          {{#if author}}
            <h1>{{author.firstName}} {{author.lastName}}</h1>
          {{/if}}
        </div>