Handlebars.js下载地址：http://handlebarsjs.com/

最近自己在建一个站，采用完全的前后端分离的方式，现在正在做前端的部分。其中有项功能是需要ajax调用后端接口，返回json数据后要动态的插入数据。但是一开始我自己是用最"传统"的通过js拼接html字符串，然后再用jq插入到页面中的方式。比如说下面的这个例子，我要显示一个个人信息卡：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>Index</title>
  6.          <script src="js/jquery.js"></script>
  7.          <style>
  8.              .person {
  9.                  font-size:40px;
  10.                  float:left;
  11.                  padding:20px;
  12.                  margin:30px;
  13.                  background-color:pink;
  14.              }
  15.          </style>
  16.      </head>
  17.  
  18.      <body>
  19.          <div class = "person" id="person_info">
  20.          </div>
  21.      </body>
  22.  
  23.      <script>
  24.          var data = {
  25.              name:'约翰莫里森',
  26.              home:'美国',
  27.              job:'摔跤手'
  28.          };
  29.  
  30.          var str = "";
  31.          str += "<div>姓名：" + data.name + "</div>";
  32.          str += "<div>出生地：" + data.home + "</div>";
  33.          str += "<div>职业：" + data.job + "</div>";
  34.  
  35.          $('#person_info').html(str);
  36.      </script>
  37.  </html>

这里我得用自己"手动"拼接html字符串，况且这只是一个极其简单的例子，如果标签之间的嵌套、属性复杂的话，这种方式写起来相当的麻烦，且标签间没有层次结构，可读性和维护性极差。

后来偶然在个地方了解到了模板引擎，从此这种工作一下简便了许多！ 先看下用Handlebars完成上面的例子是如何操作的：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <title>Handlebars</title>
  6.          <script src="js/jquery.js"></script>
  7.          <script src="js/handlebars.js"></script>
  8.          <style>
  9.              .person {
  10.                  font-size:40px;
  11.                  float:left;
  12.                  padding:10px;
  13.                  margin-left:30px;
  14.                  background-color:pink;
  15.              }
  16.          </style>
  17.      </head>
  18.  
  19.      <body>
  20.          <div id = "person_info">
  21.              <div class = "person">
  22.                  <div>姓名：{{name}}</div>
  23.                  <div>出生地：{{home}}</div>
  24.                  <div>职业：{{job}}</div>
  25.              </div>
  26.          </div>
  27.      </body>
  28.  
  29.      <script>
  30.          var data ={
  31.              name:'约翰莫里森',
  32.              home:'美国',
  33.              job:'摔跤手'
  34.          };
  35.  
  36.          var tmpl = $('#person_info').html();
  37.  
  38.          var func = Handlebars.compile(tmpl);
  39.  
  40.          var result = func(data);
  41.  
  42.          $('#person_info').html(result);
  43.      </script>
  44.  
  45.  </html>

先从最下面的js代码讲起，核心代码就这四句：

  1.          var tmpl = $('#person_info').html();
  2.          var func = Handlebars.compile(tmpl);
  3.          var result = func(data);
  4.          $('#person_info').html(result);

第一行的 var tmpl = $('#person_info').html(); 就只是基本的jq语法；<body>中<div id="person_info">块中的就是html模板，这里取得了该div块下的html模板内容(对象tmpl)。此时如果用console.log(tmpl)打印该对象的话，得到的内容是

  1.              <div class = "person">
  2.                  <div>姓名：{{name}}</div>
  3.                  <div>出生地：{{home}}</div>
  4.                  <div>职业：{{job}}</div>
  5.              </div>

用两个大括号括起来的变量名会在后面 向函数传入数据(下面会提到) 时进行匹配。

第二行 var func = Handlebars.compile(tmpl); 通过Handlebars的compile()对刚刚取得的html模板进行预编译，返回的是一个函数(现在对象func即为该函数)。

var result = func(data); 这个函数带有一个参数，该参数为用以匹配模板用的数据。我这里事先写死一个数据对象data，然后传入该函数内。返回值是匹配好的html内容，打印出来就是 ：

  1.              <div class = "person">
  2.                  <div>姓名：约翰莫里森</div>
  3.                  <div>出生地：美国</div>
  4.                  <div>职业：摔跤手</div>
  5.              </div>

最后用jq将内容插入到页面中： $('#person_info').html(result);

如果有多项数据需要展示，则需要用到{{#each this}}  {{/each}}。 语法类似标签，所以要注意别漏了闭合标签{{/each}}。 {{#each this}} ... {{/each}}中间的内容是模板。this 则是指传入函数的数据data。  用在实现上述例子的代码如下：

  1.  <body>
  2.          <div id = "person_info">
  3.              {{#each this}}
  4.              <div class = "person">
  5.                  <div>姓名：{{name}}</div>
  6.                  <div>出生地：{{home}}</div>
  7.                  <div>职业：{{job}}</div>
  8.              </div>
  9.              {{/each}}
  10.          </div>
  11.      </body>
  12.  
  13.      <script>
  14.          var data =[{
  15.              name:'约翰莫里森',
  16.              home:'美国',
  17.              job:'摔跤手'
  18.          },
  19.          {
  20.              name:'Faker',
  21.              home:'韩国',
  22.              job:'英雄联盟职业选手'
  23.          }];
  24.  
  25.          var tmpl = $('#person_info').html();
  26.          var func = Handlebars.compile(tmpl);
  27.          var result = func(data);
  28.          $('#person_info').html(result);
  29.      </script>

如果对象间所包含的数据域有个别不同，则需要分支语句进行判断  即{{#if xxx}} {/if}}。 用例如下：

  1.  <body>
  2.          <div id = "person_info">
  3.              {{#each this}}
  4.              <div class = "person">
  5.                  <div>姓名：{{name}}</div>
  6.                  <div>出生地：{{home}}</div>
  7.                  <div>职业：{{job}}</div>
  8.                  {{#if life}}
  9.                  　　<div>生涯经历：</div>
  10.                      <ul>
  11.                      {{#each life}}
  12.                          <li>{{this}}</li>
  13.                      {{/each}}
  14.                      </ul>
  15.                  {{/if}}
  16.              </div>
  17.              {{/each}}
  18.          </div>
  19.      </body>
  20.  
  21.      <script>
  22.          var data =[{
  23.              name:'约翰莫里森',
  24.              home:'美国',
  25.              job:'摔跤手'
  26.          },
  27.          {
  28.              name:'Faker',
  29.              home:'韩国',
  30.              job:'英雄联盟职业选手',
  31.              life:['S3世界总冠军','S4世界总冠军','S5世界总冠军']
  32.          }];
  33.  
  34.          var tmpl = $('#person_info').html();
  35.          console.log(tmpl);
  36.          var func = Handlebars.compile(tmpl);
  37.          var result = func(data);
  38.          $('#person_info').html(result);
  39.      </script>

最后再附上一篇关于Handlebars语法比较详细的介绍：http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

javascript/jquery模板引擎——Handlebars初体验的更多相关文章

  1. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  2. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

  3. 【阿里云产品公测】云引擎ACE初体验

    作者:阿里云用户蓝色之鹰 :RYYjmG5;  来投票支持我把=i2]qj\  序号2. [阿里云产品公测]云引擎ACE初体验:作者:蓝色之鹰 e(OKE7  序号10.[阿里云产品公测]结构化数据服 ...

  4. Javascript模板引擎handlebars使用实例及技巧

    转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...

  5. JavaScript模板引擎Handlebars

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

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

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

  7. day12—jQuery ui引入及初体验

    转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...

  8. 关于模板引擎handlebars.js基本用法

    说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...

  9. JS 模板引擎 Handlebars.js 中文说明

    Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Han ...

随机推荐

  1. No-1.文件和目录

    文件和目录 01. 单用户操作系统和多用户操作系统(科普) 单用户操作系统:指一台计算机在同一时间 只能由一个用户 使用,一个用户独自享用系统的全部硬件和软件资源 Windows XP 之前的版本都是 ...

  2. shell $() vs ${}

    reference $( )与` `(反引号)都是用来做命令替换(command substitution)用的 run command 3, 2, 1 command1 $(command2 $(c ...

  3. spring mvc poi excel

    Util类 package com.common.util; public class ExportUtil { private XSSFWorkbook wb = null; private XSS ...

  4. 深入理解Spring IoC容器和动态代理机制

    Deployment期间验证 实现一: <bean id="theTargetBean" class="..."/> <bean id=&qu ...

  5. mysql 报错：ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA

    解决办法:设置临时环境变量 ;  

  6. mysql5.7 在Centeros 6 下自动安装的shell脚本

    概述: 此脚本实现了在Centeros 6版本下自动安装mysql5.7到目录 /opt/mysql-5.7*并且做软连接映射到 /usr/local/mysql,自动修改root密码为:123456 ...

  7. 6. 将单独表空间（File-Per-Table Tablespaces）复制到另一个实例

    6. 将单独表空间复制到另一个实例 本节介绍如何将单独表空间从一个MySQL实例复制 到另一个MySQL实例,也称为可传输表空间功能. 将InnoDB单独表空间复制到其他实例的原因有很多: - 在不对 ...

  8. for、while循环

    for循环 # for 循环后面可以对Iterable或者Iterator进行遍历 # "abc"和[1,2,3]为可迭代对象,range(4)为迭代器 for i in &quo ...

  9. Linux文件查找find和locate

    目 录 第1章 locate文件查找    1 1.1 概述    1 1.2 locate文件查找的特性    1 第2章 文件查找概述    1 第3章    1 3.1 文件名查找    1 3 ...

  10. css 实践记录

    子绝父相 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 利用子绝父相来实现一种比较老的居中方式:1.明确宽度:2.定位左边到容器的 ...