Handlerbars基础笔记
此笔记摘抄于杨元的博客（http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）
引入
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
使用each循环
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<body>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each people}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"people": [
{
"name": "Larry",
"sex": "0",
"age": 18
},
{
"name": "Jack",
"sex": "0",
"age": 22
},
{
"name": "Devin",
"sex": "1",
"age": 18
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
循环模板的那个地方有点像angularJS有木有？
还可以使用this，但是得做点修改
模板改用this
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
上面的data是个对象，现在得改用数组
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = [
{
"name": "Larry",
"sex": "0",
"age": 18
},
{
"name": "Jack",
"sex": "0",
"age": 22
},
{
"name": "Devin",
"sex": "1",
"age": 18
}
]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
嵌套和循环更配噢！
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
{{#each info}}
{{../name}}的{{this}}<br>
{{/each}}
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = [{
"name":"Larry",
"info":[
"test1",
"test2",
"test3"
]
},{
"name":"Devin",
"info":[
"test4",
"test5",
"test6"
]
}]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#dataList').html(myTemplate(data));
});
</script>
既然有循环，肯定就会有index索引啦！
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{testIndex @index}}</td>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
testIndex是变量，下面的registerHelper()要拎清楚
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "Larry",
"sex": "0",
"age": 18
},
{
"name": "Jack",
"sex": "0",
"age": 22
},
{
"name": "Devin",
"sex": "1",
"age": 19
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的
Handlebars.registerHelper("testIndex",function(index,options){
return parseInt(index)+1;
}); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
访问父级索引，就是我们平时看目录看到的1.1 1.2 1.3 1.1.1 1.1.2 1.1.3这样的，怎么办？如下可破
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Handlebars.js循环中索引(@index)使用技巧 - by 杨元</title>
</head>
<body>
<h1>Handlebars.js循环中索引(@index)使用技巧</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-v1.3.0.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{addOne @index}}</td>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{#each family}}
<tr>
<td>{{../_index}}.{{@index}}</td>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
var data = [{
name: "张三",
sex: "男",
age: 35,
family: [{
name: "张三儿子",
sex: "男",
age: 10,
},{
name: "张三妻子",
sex: "女",
age: 33,
}]
},{
name: "李四",
sex: "男",
age: 23,
family: [{
name: "李四妻子",
sex: "女",
age: 23,
}]
},{
name: "甜妞",
sex: "女",
age: 18,
family: [{
name: "甜妞妈妈",
sex: "女",
age: 40,
},{
name: "甜妞爸爸",
sex: "男",
age: 43,
},{
name: "甜妞姥爷",
sex: "男",
age: 73,
}]
}]; //注册索引+1的helper
var handleHelper = Handlebars.registerHelper("addOne",function(index){
//利用+1的时机，在父级循环对象中添加一个_index属性，用来保存父级每次循环的索引
this._index = index+1;
//返回+1之后的结果
return this._index;
});
//解析模版
var handle = Handlebars.compile($("#table-template").html());
//生成html
var html = handle(data);
//插入到页面
$("#tableList").append(html); </script>
</body>
</html>
当你有好多个兴趣爱好的时候，要将它们罗列出来，但是这些兴趣爱好本身就是一个对象数组，也要被循环出来，怎么破？with这个时候就可以帮上忙了，它可以让你进入一个具体的上下文。
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>with-进入到某个属性(进入到某个上下文环境) - by 杨元</title>
</head>
<body>
<h1>with-进入到某个属性(进入到某个上下文环境)</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
<td>
{{#with favorite}}
{{#each this}}
<p>{{name}}</p>
{{/each}}
{{/with}}
</td>
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = [
{
"name": "张三",
"sex": "0",
"age": 18,
"favorite":
[
{
"name":"唱歌"
},{
"name":"篮球"
}
]
},
{
"name": "李四",
"sex": "0",
"age": 22,
"favorite":
[
{
"name":"上网"
},{
"name":"足球"
}
]
},
{
"name": "妞妞",
"sex": "1",
"age": 18,
"favorite":
[
{
"name":"电影"
},{
"name":"旅游"
}
]
}
]; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
再融会贯通一下，结合下this，换着姿势玩
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
<td>
{{#with favorite}}
{{#each this}}
<p>{{this}}</p>
{{/each}}
{{/with}}
</td>
</tr>
{{/each}}
</script>
if这个东西啊，到哪都管用
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
{{#if name}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/if}}
{{/each}}
</script>
也有功力不够的时候，判断条件这种东西还是要在registerHelper里面写
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>由于if功力不足引出的Helper - by 杨元</title>
</head>
<body>
<h1>由于if功力不足引出的Helper</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
{{#if name}}
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}
{{/if}}
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 23
},
{
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较大小的Helper,判断v1是否大于v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//满足添加继续执行
return options.fn(this);
}else{
//不满足条件执行{{else}}部分
return options.inverse(this);
}
}); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
还会碰到一些html编码问题
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>关于HTML编码 - by 杨元</title>
</head>
<body>
<h1>关于HTML编码</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>个人主页</th>
</tr>
</thead>
<tbody id="tableList"> </tbody>
</table> <!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
{{#compare age 20}}
<td>{{homePage}}</td>
{{else}}
<td>{{{homePage}}}</td>
{{/compare}}
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18,
"homePage":"<a href='javascript:void(0);'>张三的个人主页</a>"
},
{
"name": "李四",
"sex": "0",
"age": 22,
"homePage":"<a href='javascript:void(0);'>李四的个人主页</a>"
},
{
"name": "妞妞",
"sex": "1",
"age": 19,
"homePage":"<a href='javascript:void(0);'>妞妞的个人主页</a>"
}
]
}; //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html()); //注册一个比较数字大小的Helper,有options参数，块级Helper
Handlebars.registerHelper("compare",function(v1,v2,options){
//判断v1是否比v2大
if(v1>v2){
//继续执行
return options.fn(this);
}else{
//执行else部分
return options.inverse(this);
}
}); //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script>
</body>
</html>
通过{{}}取出来的内容，都会经过编码，也就是说，如果取出的内容中包含html标签，会被转码成纯文本，不会被当成html解析，实际上就是做了类似这样的操作：把<用<替代。
这样做是很好的，既可以显示html代码，又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。
但是有时候我们可能需要解析html，不要转码，很简单，把{{}}换成{{{}}}就可以啦。
本例中，年龄大于20的童鞋个人主页被编码，直接展示出来；而年龄小于20的童鞋，个人主页被当成html解析，显示的是一个超链接。
摘抄完毕，以上代码我都写过自己的测试例子，在花旗快要离职的那段时间每天偷偷看着杨元的博客写的，也非常怀念在花旗上班的日子，虽然学不到什么东西，但是还是给了我一个方向，项目里经常用到handlerbars，所以我才来学，这对我也是一个学习的机会。
感谢所有人！
Handlerbars基础笔记的更多相关文章
- Java基础笔记 – Annotation注解的介绍和使用 自定义注解
Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 | 被围观 25,969 views+ 1.Anno ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- MYSQL基础笔记（六）- 数据类型一
数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...
- MYSQL基础笔记（五）- 练习作业：站点统计练习
作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...
- MYSQL基础笔记（四）-数据基本操作
数据操作 新增数据:两种方案. 1.方案一,给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致.凡是非数值数据,到需要使用引号(建议使用单引号)包裹. i ...
- MYSQL基础笔记(三)-表操作基础
数据表的操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名( 字段名 数据类型, 字段名 数据类型, 字段n 数据类型 --最后一行不需要加逗号 ...
- MYSQL基础笔记（二）-SQL基本操作
SQL基本操作 基本操作:CRUD,增删改查 将SQL的基本操作根据操作对象进行分类: 1.库操作 2.表操作 3.数据操作 库操作: 对数据库的增删改查 新增数据库: 基本语法: Create da ...
- MYSQL基础笔记(一)
关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
随机推荐
- mininet实验 脚本实现控制交换机行为
写在前面 本文参考 通过这个实验,我学习到了另一种下流表的方式. 下流表有两种方式(我目前了解): 通过controller下发. 通过OvS提供的API直接向OvS交换机下流表. 本实验脚本已经把相 ...
- [CF] Sasha and One More Name
题目大意 就是给一个回文串,然后进行k次分割,产生k+1个字符子串,通过重新组合这k+1个字符字串,是否会出现新的不同的回文串,且最少需要分割几段.无法产生新的回文串则输出"Impossib ...
- OOP 1.3 动态内存分配
1.new运算符用法 分配一个变量:P=new T; T是任意类型名,P是类型为T的指针.动态分配出一片大小为sizeof(T)字节的内存空间,将该空间的起始地址赋值给P(new T的返回值为 T). ...
- Microsoft Orleans 之安装
先决条件 Orleans 是一个.net 类库集,为了使用它,你需要.net 4.5.1 或者更高版本,开发工具集需要visual studio 2015 或者更高版本或者其他支持的开发工具,不支持V ...
- Markdown使用github风格时报TLS错误解决办法
https://docs.microsoft.com/en-us/officeonlineserver/enable-tls-1-1-and-tls-1-2-support-in-office-onl ...
- $(document).click() 在苹果手机上不能正常运行解决方案
本来是如下一段跳转代码,发现在安卓和微信开发者工具上都能正常运行,但是苹果手机就不行了. $(document).on('click', '.url', function(){ location.hr ...
- Android中res/layout文件夹里新建布局文件，R中不生成ID的奇葩错误
新浪微博:http://weibo.com/u/1928100503 网上看了下,发现大都是xml文件名大写而导致的id不能生成的问题,但在下的问题却不是大小写的问题,在下发现,当你的layout目录 ...
- TP中系统跳转方法
系统跳转方法 在ThinkPHP中系统有2个跳转方法,分别是成功跳转和失败跳转: 成功: $this -> success(跳转提示,跳转地址,等待时间); 失败: $this -> er ...
- BER-TLV数据结构【转】
转自:https://www.cnblogs.com/SCPlatform/p/5076935.html 为了便于后文的引用说明,先列出一段TLV结构的数据: [6F] 4D │ ├─[84] 07 ...
- Javascript中判断变量是数组还是对象(array还是object)
怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...