模板引擎比较久远的一个技术，常见的模板引擎有 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. CRM WebClient UI里的文件是如何上传到Netweaver后台的

    使用Chrome开发者工具调试CRM WebClient UI里附件上传的功能: 从本地选择一个文件,断点触发: 前端取得用户选中上传的文件名: Jerry.txt 点Attach按钮后,触发ABAP ...

  2. 关于使用Encoding转码的问题，以及StreamWriter的小应用

    StreamWriter write = new StreamWriter("../../test2.txt"); write.WriteLine("中国123巴西red ...

  3. 启动Windows服务

    实现效果: 知识运用: ServiceController类的ServiceName Status属性 public string ServiceName {get; set;} //对此Servic ...

  4. Unable to launch the Java Virtual Machine

    看看国内的回答,http://zhidao.baidu.com/question/119993351.html 再看看国外的,http://www.mkyong.com/oracle/oracle-s ...

  5. mask r-cnn

    mask R-cnn, kaiming he的新作.可以同时完成object detection和segmentation,还可以做pose estimation,简直就是功能多多啊.在coco上测试 ...

  6. BZOJ3288: Mato矩阵(欧拉函数 高斯消元)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 386  Solved: 296[Submit][Status][Discuss] Descriptio ...

  7. 概述「DAG加边至强连通」模型&&luoguP2746校园网Network of Schools

    模型概述 有一DAG,问最少加多少条边能够使图强连通. 题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的 ...

  8. Linux文件服务器实战（虚拟用户）

    vsftpd基于系统用户访问ftp服务器,系统用户越多越不利于管理,不利于系统安全,这样就以vsftp虚拟防护的方式来解决. 虚拟用户没有实际的真实系统用户,,而是通过映射到其中一个真实用户以及设置相 ...

  9. 用python画小猪佩奇(非原创)

    略作改动: # coding:utf-8 import turtle as t t.screensize(400, 300, "blue") t.pensize(4) # 设置画笔 ...

  10. bootloader svc 模式

    bootloader 和操作系统都是工作在svc模式下 /* * set the cpu to SVC32 mode */ mrs r0,cpsr bic r0,r0,#0x1f orr r0,r0, ...