JavaScript HTML Handlebars Template

/*********************************************************************
 *             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>

 

posted on 2017-08-24 12:04  zengjf  阅读(279)  评论(0编辑  收藏  举报

导航