js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
来源:互联网 发布:淘宝店如何增加流量 编辑:程序博客网 时间:2024/06/12 01:25
<!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}} //备注:这里的else属于compare里面的
<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>
<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}} //备注:这里的else属于compare里面的
<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>
0 0
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- 11-由于if功力不足引出的Helper
- js模版引擎handlebars.js实用教程——if-判断的基本用法
- js模版引擎handlebars.js实用教程——if-判断的基本用法
- handlebars-----由于if的条件不足引出的helper
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- js模版引擎handlebars.js
- handlebars.js模版引擎中EACH循环遍历的使用
- 介绍一款js模版引擎handlebars
- handlebars.js模版引擎入门案例
- Handlebars js模版
- java学习笔记之java程序连接到数据库(一)
- 黑马——OC基础(3)
- 小波变换和motion信号处理1
- NOJ1079——111…——数论mod
- 最长公共子序列(LCS)
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- NOJ1080悄悄话游戏
- 如何给大数据量的磁盘文件排序
- 关于c++中的virtual继承的总结
- android中wifi原理及流程分析(很经典)
- In App Purchase总结
- Kinect 3D建模
- c笔记——可变长参数函数用法
- EF框架调用存储过程