使用jQuery+huandlebars遍历数组
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html)
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-循环中使用this - by 杨元</title>
</head>
<body>
<h1>each-循环中使用this</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 this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = [
{
"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>
使用jQuery+huandlebars遍历数组的更多相关文章
- 使用jQuery+huandlebars遍历数组嵌套数组
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- 使用jQuery+huandlebars遍历展示对象中的数组
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- Jquery通过遍历数组给checkbox赋默认值
需求:有一个数组:(北京菜,粤菜),checkbox如下: 现在想通过遍历这个数组,使数组里包含的值,在checkbox选中 代码: var flavors = new Array([北京菜 , 粤菜 ...
- 使用jQuery+huandlebars遍历if判断不足引用helper
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- 使用jQuery+huandlebars遍历中if判断
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- jquery里遍历普通数组和多维数组的方法及实例
jquery里遍历数组用的是$.each,下面站长给大家几个具体的实例: 实例1.遍历一个普通的一维数组: 1 2 3 4 5 6 7 8 <script> //声明数据有下面两种方式 / ...
- 原生js使用forEach()与jquery使用each遍历数组,return false 的区别
原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...
- jquery遍历数组与筛选数组的方法
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第 ...
- jquery 遍历 数组1
使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tr ...
随机推荐
- CRM 2016 升级CRM365之注意事项
https://docs.microsoft.com/zh-cn/previous-versions/dynamicscrm-2016/deployment-administrators-guide/ ...
- Unable to load the plugin type
crm 2016 post update 异步执行 1 我们自定义文件是发布在GAC的,所以先注册GAC 2 更新注册插件 3 重启IIS ,异步服务
- [SQL]SQL Prompt5的工具栏按钮介绍
这是SQL Prompt5的工具栏按钮 Refresh Suggestions 刷新提示(数据库更改表结构后,需要刷新一下) Format SQL 格式化代码(Pro版本才能启用,可定制,所有前边带红 ...
- 第2课 类型推导(2)_decltype关键字
1. decltype关键字 (1)auto所修饰的变量必须被初始化,编译器才能通过初始化来确定auto所代表的类型,即必须先定义变量. (2)decltype可以在编译期推导出一个变量或表达式的结果 ...
- 流(Stream)与文件流(FileStream)
//通过流的方式添加 StreamWriter writer = new StreamWriter(@"C:\A\ca.txt", true, Encoding.Default); ...
- day15(模块引用笔记)
import spam文件名是spam.py,模块名则是spam# 首次导入模块发生?件事# 1. 会产生一个模块的名称空间# 2. 执行文件spam.py,将执行过程中产生的名字都放到模块的名称空间 ...
- c# 测试运行时间毫秒级
, , , , , , )).Ticks) / ; /*代码*/ , , , , , , )).Ticks) / ; MessageBox.Show((currentMillis1 - current ...
- android开发 静态碎片布局实现
实现思维: 1.需要写2个或者多个子布局 2.写一个Java的class去实现将子布局与父类布局铺满.(一个子布局对应一个class) 3.在父类布局中导入fragment布局,并且添加android ...
- FasDfs缩略图解决方案 -- Linux
前面研究了fastdfs的安装部署,并且做了多机同步. 这次我们解决下FastDFS做文件服务器并处理缩略图的问题. 有两个方案,方案1,在上传过程中生成多张图片,服务器存备.方案2,只上传一张图片, ...
- Install Python on Mac (Anaconda)
Install Python on Mac (Anaconda) 标签(空格分隔): 运维 This blog is copy from the link: https://medium.com/@G ...