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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值