zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    02-最简C语言程序
    Go学习笔记-GO编程语言手册
    Go学习笔记-Effective Go
    go学习笔记-语法
    机器学习-数据挖掘
    windows下jupyter notebook的安装及配置
    wpf学习笔记
    windows下安装mingW及控制台启用
    nginx
    MFC学习笔记
  • 原文地址:https://www.cnblogs.com/zengjfgit/p/7422367.html
Copyright © 2011-2022 走看看