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

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

Handlebars依赖jq，也可以写不依赖的jq的方式。本教程依赖。

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

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

下面这块代码是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>

　　

js模板引擎之 Handlebars 基本用法的更多相关文章

  1. JS模板引擎handlebars.js的简单使用

    handlebars.js的使用 首先我们要明白handlebars.js是干什么用的,我们知道使用jsp很麻烦, 于是我们开始使用freemarker等模板引擎,但这个只是针对服务器端来解 析的,那 ...

  2. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

  3. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  5. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

  8. 百度JS模板引擎 baiduTemplate 1.0.6 版

    A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...

  9. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

随机推荐

  1. Python基础学习之序列（1）

    序列 序列类型有着相同的访问模式:它的每一个元素可以通过指定一个偏移量的方式得到.而多个元素可以通过切片操作的方式一次得到,下标偏移量是从0开始到总元素-1结束,之所以要减1是因为我们是从0开始计数的 ...

  2. 如何创建一个新浪微博应用以及获得Access token

    前提条件是您得先有一个新浪微博帐号. 打开网页http://open.weibo.com/wiki/%E9%A6%96%E9%A1%B5 点击新手引导->开发者页面: 会自动跳转到页面:http ...

  3. Last_IO_Errno: 1062

    主键冲突的错误 1062   模拟错误:   在主库上操作: create table test100(id int not null,name varchar(20),primary key(id) ...

  4. 【HHHOJ】ZJOI2019模拟赛（十二）03.03 解题报告

    点此进入比赛 得分: \(0+77+20=97\) 排名: \(Rank\ 5\) \(Rating\):\(+46\) \(T1\):[HHHOJ178]依神(点此看题面) 这套题目中的唯一一道传统 ...

  5. PHP 5.4 on CentOS/RHEL 7.0, 6.5 and 5.10 via Yum

    PHP 5.4.36 has been released on PHP.net on 18th December 2014, and is also available for CentOS/RHEL ...

  6. 2017.10.12 Java的计数器的开发

    //我们用一个合成的applet/application来简单显示出一个计数器的结果/** * Created by qichunlin on 2017/10/12. */ /*简单的计数器*/ im ...

  7. Ubuntu 14.04 VPS安装配置***的方法

    #安装*** $ sudo apt-get update $ sudo apt-get install python-gevent python-pip $ sudo pip install shad ...

  8. MongoDB数据库CXX Driver编译

    最近项目需要,想要测试下MongoDB读写大量小图片的速度(单纯文件系统io效率比较低,想试试NoSQL能不能提速), 因为使用C++开发,所以使用MongoDB的CXX驱动,需要自己编译,下面记录整 ...

  9. sql插入临时表数据的方法

    方法有两种,主要看需求. 方法1:定义好临时表的字段和类型.插入对应的值 create table #Tmp --创建临时表#Tmp ( City varchar(), -- Country varc ...

  10. openstack kilo 命令行

    把下面内容放到.bashrc中,或者直接执行也行. export OS_USERNAME=adminexport OS_PASSWORD=admin              #根据实际密码来设    ...