使用jQuery+huandlebars遍历中if判断
兼容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>if-判断的基本用法 - by 杨元</title>
</head>
<body>
<h1>if-判断的基本用法</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}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/if}}
{{/each}}
</script> <!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"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遍历中if判断的更多相关文章
- 使用jQuery+huandlebars遍历if判断不足引用helper
兼容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+huandlebars循环中索引(@index)使用技巧(访问父级索引)
兼容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+huandlebars遍历数组
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- 用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）
用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中,并返回第一次出现的位置(找不到返回 -1) 例子: a='12';b='1234567'; // 返回 0 a='47';b='1234 ...
- js/jQuery使用过程中常见问题
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- js/jQuery使用过程中常见问题/已踩过的坑大杂烩
目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
随机推荐
- highcharts 获取不到隐藏容器大小
1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换
- cocos2dx创建win32项目一般步奏
1.导入一个新项目步奏:解决方案:右键->添加->添加现有项目->添加依赖项目libCocoStudioD:\work\CannonDefender\cocos2d\cocos\ed ...
- 百战程序员9- IO流
1.IO是什么意思? data source是什么意思? IO:输入输出 data source:数据源 2.字节流和字符流有什么区别?输入流和输出流有什么区别? 分类 3.节点流和处理流有什么区别? ...
- SSH(远程登录)原理
最近在研究hadoop,因为是分布式的,会涉及很多机器协作工作,但所有的操作都是需要进行权限验证的,namenode主机会尝试启动datanode主机上的进程等等.下面就用一张图来解释SSH登录验证的 ...
- Angular + Websocket
Angular使用RxJS,它本质上是一个反应式扩展的javascript实现.这是一个使用可观察序列组成异步和基于事件的程序的库,非常适合使用WebSockets. 简而言之,RxJS允许我们从we ...
- PythonStudy——函数的分类 Classification of functions
# PEP8:python写代码的规范 def fn(n1, n2): """ 函数的文档注释 :param n1: 第一个数 :param n2: 第二个数 :retu ...
- php输出数据到csv文件
function export() { $fileName = date('Y-m-d').uniqid().'.csv'; set_time_limit(0); ini_set('memory_li ...
- Python tkinter模块和参数
转自:https://www.cnblogs.com/aland-1415/p/6849193.html 1.使用tkinter.Tk() 生成主窗口(root=tkinter.Tk()):root. ...
- Dockerfile之nginx（六）
一.Dokcerfile的基本指令 1)From 指定构建镜像的基础镜像 2)MAINTAINER 指定镜像的作者 3)RUN 使用前一条指令创建的镜像生产容器,并在容器中执行命令,执行结束后会自 ...
- BIO、NIO实战
BIO BIO:blocking IO,分别写一个服务端和客户端交互的C/S实例.服务器端: import java.io.BufferedReader; import java.io.IOExcep ...