js模板引擎之 Handlebars 基本用法

时间 2019-11-25

原文原文链接

模板引擎比较久远的一个技术，常见的模板引擎有 baiduTemplate(百度)\artTemplate（腾讯）\juicer（淘宝）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate 等等javascript

本篇简单介绍一下Handlebars相关经常使用例子：html

Handlebars依赖jq，也能够写不依赖的jq的方式。本教程依赖。java

Handlebars官方网站：http://handlebarsjs.com/jquery

例子中有Handlebars的注释方式、数据循环绑定、if/else 断定、浏览器的调试log、自定义helper、自定义partials。ios

下面这块代码是Handlebars的模板代码：
<script id="table-template-xxxx" type="text/x-handlebars-template">
　　xxxx
</script>

下面代码是数据源代码，能够没有数据，好比log就能够没有数据
var dataxxxxxx = {xxxxxxx}
 
下面的代码是数据绑定以及页面html模板渲染的代码 
var myTemplatexxxxx = Handlebars.compile($("#table-template-xxxxxxxx").html());
$('.xxxxxxxx').html(myTemplatexxxxxxxxxx(dataxxxxxxxx));

下面此处的代码表示的是模板生成的html插入到页面何处
<div class="xxxxxxxx"></div>

<!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>each-基本循环使用方法 - by 杨元</title>
  </head>
  <body>
    <h1>each-基本循环使用方法</h1>
    <!--基础html框架-->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="tableList">
        
      </tbody>
    </table>　　<!-- 模板生成完成以后插入的位置 -->
    <div class="if"></div>
    <div class="log"></div>
    <div class="comments"></div>
    <div class="helper"></div>
    <div class="partials"></div>
    
    <!--插件引用-->
    <script type="text/javascript" src="script/jquery.min.js"></script>
    <script type="text/javascript" src="script/handlebars.min.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操做语句-->
    <!--id能够用来惟一肯定一个模版,type是模版固定的写法-->

    <!-- {{name}} 变量的多种写法，下面的几种方式都是当前页面，当前做用域的变量 -->
    <!-- <p>{{./name}} or {{this/name}} or {{this.name}}</p> -->

    <!-- 循环的写法 -->
    <script id="table-template" type="text/x-handlebars-template">
      {{#each student}}
        <tr>
          <td>{{name}}</td>
          <td>{{sex}}</td>
          <td>{{age}}</td>
        </tr> 
        {{else}}
          <h1>No content</h1>        
      {{/each}}
    </script>

    <!-- if的写法 -->
    <script id="table-template-if" type="text/x-handlebars-template">

      <div class="entry">
        {{#if author}}
          <h1>{{firstName}} {{lastName}}</h1>
        {{else}}
          <h1>Unknown Author</h1>
        {{/if}}
      </div>

    </script>    

    <!-- log的写法 -->
    <script id="table-template-log" type="text/x-handlebars-template">

      {{log "Look at me!"}}

    </script>    

    <!-- comments 的写法 -->
    <script id="table-template-comments" type="text/x-handlebars-template">

      {{!-- 哇啊哇哇哇 --}}
      {{! 哇啊哇哇哇 }}

    </script>    


    <!-- Helper的写法 -->
    <script id="table-template-helper" type="text/x-handlebars-template">

      <div class="entry">
        <h1>{{title}}</h1>
        {{#with story}}
          <div class="intro">{{{intro}}}</div>
          <div class="body">{{{body}}}</div>
        {{/with}}
      </div>

    </script>    


    <!-- 建立元素的写法 -->
    <script id="table-template-partials" type="text/x-handlebars-template">

      <div class="post">
        {{> userMessage tagName="h1" }}

        <h1>Comments</h1>

        {{#each comments}}
          {{> userMessage tagName="h2" }}
        {{/each}}
      </div> 

    </script>       

  
    
    <!--进行数据处理、html构造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模拟的json对象
        var data = {
                    "student": [
                        {
                            "name": "张三",
                            "sex": "0",
                            "age": 18
                        },
                        {
                            "name": "李四",
                            "sex": "0",
                            "age": 22
                        },
                        {
                            "name": "妞妞",
                            "sex": "1",
                            "age": 18
                        }
                    ]
                };

        // if的数据
        var dataif = {
          "author": false,
          "firstName": "mary",
          "lastName": "mei"
        }

        // helper数据
        var datalist = {
            title: "First Post",
            story: {
              intro: "Before the jump",
              body: "After the jump"
            }
          }

        // partials数据
        var partials = {
          author: {firstName: "Alan", lastName: "Johnson"},
          body: "I Love Handlebars",
          comments: [{
            author: {firstName: "Yehuda", lastName: "Katz"},
            body: "Me too!"
          }]
        };
          
        //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
        $('#tableList').html(myTemplate(data));


        // if绑定的代码
        var myTemplateIf = Handlebars.compile($("#table-template-if").html());
        $('.if').html(myTemplateIf(dataif));

        // log绑定的代码，在控制台输出
        var myTemplateIf = Handlebars.compile($("#table-template-log").html());
        $('.log').html(myTemplateIf());

        // comments绑定的代码，注释代码
        var myTemplateComments = Handlebars.compile($("#table-template-comments").html());
        $('.comments').html(myTemplateComments());        

        // helper绑定代码，helper至关于一个自定义function
        var myTemplateList = Handlebars.compile($("#table-template-helper").html());
        Handlebars.registerHelper('with', function(datalist, options) {
          return options.fn(datalist);
        });
        $('.helper').html(myTemplateList(datalist));

        // partials 绑定代码
        var myTemplatePartials = Handlebars.compile($("#table-template-partials").html());
        Handlebars.registerPartial('userMessage',
            '<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>'
            + '<div class="body">{{body}}</div>');
        $('.partials').html(myTemplatePartials(partials));


      });
    </script>
  </body>
</html>