模板引擎比较久远的一个技术，常见的模板引擎有 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. Educational Codeforces Round 14 - F (codeforces 691F)

    题目链接:http://codeforces.com/problemset/problem/691/F 题目大意:给定n个数,再给m个询问,每个询问给一个p,求n个数中有多少对数的乘积≥p 数据范围: ...

  2. windows如何关闭指定端口

    关闭windows中被占用的端口,比如我们常见的8080端口被占用了 1.查找端口的PID netstat -aon|findstr "8080" 如图 PID为3888 2.关闭 ...

  3. [Python]面向对象近期笔记-super

    Python面向对象高级 直接调用父类方法 class A: def __init__(self): print("hello") class B(A): def __init__ ...

  4. 编译安装 mysql 5.5,运行 cmake报错Curses library not found

    是因为 curses库没有安装,执行下面的语句即可 yum -y install ncurses-devel 如果上述命令的结果是no package,则使用下面的命令安装 apt-get insta ...

  5. 在c#中using和new这两个关键字有什么意义？

    在c#中using和new这两个关键字有什么意义?答:using 引入名称空间或者使用非托管资源, new 新建实例或者隐藏基类方法

  6. 当Java遇见了Html--Servlet篇

    ###一.什么是servlet servlet是在服务器上运行的小程序.一个servlet就是一个 java类,并且通过"请求-响应"编程模型来访问的这个驻留在服务器内存里的程序. ...

  7. 【Java】常用数据类型转换（BigDecimal、包装类、日期等）

    新工作转到大数据方向,每天都要面对数据类型互相转换的工作,再加上先前面试发现这部分的知识盲点, 决定复习之余自己再写一套便捷的方法,以后会比较方便.(虽然公司有现成封装的类,里头还有些遗漏的地方,暂时 ...

  8. Linux 中将用户添加到指定组的指令

    将一个已有用户 testuser 增加到一个已有用户组 root 中,使此用户组成为该用户的附加用户组,可以使用带 -a 参数的 usermod  指令.-a 代表 append, 也就是将用户添加到 ...

  9. 洛谷 P3372 线段树1

    这是一道模板题 线段树介绍https://www.cnblogs.com/nvwang123/p/10420832.html #include<bits/stdc++.h> using n ...

  10. python 计算提成代码

    while True: with open('8564.txt') as f: r = f.readlines() start = input("请输入要查询的日期,例如20180101 : ...