js模版引擎handlebars.js实用教程——each-基本循环使用方法
<!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> <!--插件引用-->
<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>
</tr>
{{/each}}
</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
}
]
}; //注册一个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>
通过阅读本例，读者已经掌握Handlebars.js一个重要特性：循环。#each可以理解成循环命令，循环的是json对象中的student属性。对于每次循环，都可以读出里边的name、sex、age属性。
js模版引擎handlebars.js实用教程——each-基本循环使用方法的更多相关文章
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- js模版引擎handlebars.js实用教程——each-循环中使用this
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——循环中使用索引
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——with-终极this应用
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——if-判断的基本用法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- python脚本执行Scapy出现IPv6警告WARNING解决办法
安装完scapy,写了脚本执行后执行: WARNING: No route found for IPv6 destination :: (no default route?) 原因是用 from sc ...
- Git 源代码管理工具
Git 源代码管理工具 Git基本信息 Git :Git是一个“分布式”的版本控制工具 Git的作者是Linux之父 Linus Benedict Torvolds,当初开发Git仅仅是为了辅助Lin ...
- 去重 ROW_NUMBER() OVER(PARTITION BY 分组字段 ORDER BY 排序字段) RN
关键字 ROW_NUMBER() OVER(PARTITION BY 分组字段 ORDER BY 排序字段) RN 按照分组字段进行排序并标编号 ROW_NUMBER() OVER(PARTITIO ...
- 动态加载js文件
由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...
- 浅谈struts2之chain
转自:http://blog.csdn.net/randomnet/article/details/8656759 前一段时间,有关chain的机制着实困绕了许久．尽管网上有许多关于chain的解说, ...
- Oracle数据库备份 expdp/impdp导出导入命令
使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端使用, ...
- bootstrap中table的colspan不起作用
bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...
- [Python] Removing a non-empty folder
Removing a non-empty folder You will get an ‘access is denied’ error when you attempt to use os.remo ...
- Spring 3种注入方式
spring的三种注入方式: 接口注入(不推荐) getter,setter方式注入(比较常用) 构造器注入(死的应用) 关于getter和setter方式的注入: autowire="de ...
- bootstrap双日历插件实例化
网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22. ...