模板引擎比较久远的一个技术，常见的模板引擎有 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. node实现爬虫

    node实现获取到豆瓣电影排行榜页面. 准备工作: 1.新建一个文件夹node 在当前文件夹中打开cmd 下载 npm install 初始化 npm init(注意一下:如果你的npm init没有 ...

  2. 如何使用事务码SMICM分析ABAP代码发起的HTTP请求的错误ICM_HTTP_SSL_PEER_CERT_UNTRUSTED

    当我用CL_HTTP_CLIENT往一个外网的url发请求时,遇到错误:ICM_HTTP_SSL_PEER_CERT_UNTRUSTED 错误是从这段ABAP代码里抛出来的: CALL METHOD ...

  3. Socket的基本使用步骤

    Socket的基本使用步骤 一.使用Socket,首先需要导入这几个系统头文件 #import <sys/socket.h> #import <netinet/in.h> #i ...

  4. 使用selenium grid遇到的坑，解决不了冲突，只有避免

    背景:使用到grid做分发,已经有两周,运行较稳定,分发也健壮,不知道是不是要因为运行量小,服务器也没出问题,稳定到两周后,发现分发到A服务器(10.40.2.113)和B服务器(10.40.2.11 ...

  5. ELF格式文件符号表全解析及readelf命令使用方法

    http://blog.csdn.net/edonlii/article/details/8779075 1. 读取ELF文件头: $ readelf -h signELF Header:  Magi ...

  6. openwrt定制管理

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qianguozheng/article/details/24673097 近期这个比較火,可是改了东 ...

  7. 2019.03.09 ZJOI2019模拟赛 解题报告

    得分: \(20+0+40=60\)(\(T1\)大暴力,\(T2\)分类讨论写挂,\(T3\)分类讨论\(40\)分) \(T1\):天空碎片 一道神仙数学题,貌似需要两次使用中国剩余定理. 反正不 ...

  8. 【转】Android BroadcastReceiver介绍

    本文主要介绍BroadcastReceiver的概念.使用.生命周期.安全性.分类.特殊的BroadcastReceiver(本地.粘性.有序.粘性有序广播).示例代码见BroadcastReceiv ...

  9. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  10. 从Internet下载一个文件

    使用的.net框架下的System.Net.WebClient类的DownloadFile()方法以图片为例: